JavaScript之DOM绑定和删除事件

 本文主要介绍如何在获取页面元素之后为元素绑定相应的事件,从而完成一些操作。首先需要弄清事件的三要素,简单来说,要弄清给谁绑定事件,绑定什么事件,以及完成什么操作。下面介绍三种方式,后两种类似。

第一:通过addEventListener()绑定事件,通过回调函数完成后续操作。通过此法可给同一元素绑定多次事件。通过其第三个参数的设置,可设置事件传播的方式,默认为false,为冒泡模式,true为捕获模式。同时,回调函数可直接书写函数名(注意:不要加括号),在script中定义该函数即可。利用removeEventListener即可删除监听事件,需要通过函数名进行删除(不要加括号)。

第二:通过onclick绑定(以点击事件为例),同样是利用函数完成后续操作。通过此法不能绑定多次事件,以后面绑定的事件为准。通过设置onclick值为null实现此种事件的删除。

第三:依然是onclick绑定,不过可写在标签内部,可直接写执行的代码,也可以封装函数进行调用。这里的函数名需要加括号,意即点击后调用该函数。

此外,再介绍事件委托的概念。简单来说,就是不直接给子元素绑定事件,通过给其父级元素绑定事件实现一些效果,可提高效率。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button>传统点击</button>
    <button>注册点击</button>
    <button onclick="elementBind()">元素绑定</button>
    <script>
        function elementBind() {
            alert(45);
        }
        var btn = document.querySelectorAll('button');
        // 1.传统绑定事件
        btn[0].onclick = function() {
            alert(1);
        }
        btn[0].onmouseover = function() {
            console.log(2);

        };
        // 传统删除事件
        btn[0].onclick = null;
        // 2.注册绑定事件
        btn[1].addEventListener('click', function() {
            alert(1);
        });
        btn[1].addEventListener('mouseover', function() {
            console.log(2);
        });
        // 括号不要写,否则会直接调用执行
        btn[1].addEventListener('click', alertThree);

        function alertThree() {
            alert(3);
        };
        // 删除注册事件(必须通过删除相应的调用函数进行删除)
        btn[1].removeEventListener('click', alertThree);
    </script>
</body>

</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值