JavaScript之DOM绑定和删除事件

cloudOnSkyline

已于 2022-06-27 15:08:07 修改

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-06-22 14:11:07 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125408056

版权

JavaScript 事件绑定 addEventListener 事件委托事件移除

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

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

第一：通过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>

cloudOnSkyline

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM绑定和删除事件

本文主要介绍如何在获取页面元素之后为元素绑定相应的事件，从而完成一些操作。首先需要弄清事件的三要素，简单来说，要弄清给谁绑定事件，绑定什么事件，以及完成什么操作。下面介绍三种方式，后两种类似。第一：通过addEventListener()绑定事件，通过回调函数完成后续操作。通过此法可给同一元素绑定多次事件。通过其第三个参数的设置，可设置事件传播的方式，默认为false,为冒泡模式，true为捕获模式。同时，回调函数可直接书写函数名（注意：不要加括号），在script中定义该函数即可。利用removeEven
复制链接

扫一扫

专栏目录