click与addEventListener和removeEventListener事件详解

2021-03-28 09:33:47 阅读：171 来源： 互联网

标签：function removeEventListener demoDiv 事件 addEventListener click

1. onclick事件 es5

普通事件就是直接触发事件，相同的事件会被覆盖掉。代码如下：

let demoDiv=document.querySelector(".demo")
demoDiv.onclick = function(){
	console.log('你好1')
}
demoDiv.onclick = function(){
	console.log('你好2')
}
demoDiv.ondblclick = function(){
	console.log('你好3')
}
输出的结果只会有<你好2>， <你好3>
就是说相同的事件绑定同一个元素会出现覆盖；

ps:双击的时候，默认会触发单击事件；

2. addEventListener事件 es6

addEventListener进行多次绑定相同的事件都能运行。不会出现事件覆盖

let demoDiv=document.querySelector(".demo")
demoDiv.addEventListener("click",function(){
	console.log("点击111");
},false);

demoDiv.addEventListener("click",function(){
	console.log("点击222");
},false);

最后会出现【点击111】和【点击222】

3.兼容性

浏览器的兼容性
ie9 以前：使用attachEvent/detachEvent进行绑定

ie9 开始：使用addEventListener进行绑定

4. 二者区别

addEventListener对任何DOM都是有效的，而onclick仅限于HTML

addEventListener可以控制listener的触发阶段,（捕获/冒泡）。
对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。

总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

5. 移除 addEventListener事件

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
们都接受3个参数：如   addEventListener("事件名" , "事件处理函数" , "布尔值");     
听别人说：现在的版本可以省略第三个参数，默认值为false

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；
同时需要注意的是通过addEventListener()添加的匿名函数无法移除

6.错误的移除方法

<body>
    <div class="demo">点击我</div>
</body>
<script>
    let demoDiv = document.querySelector(".demo");

    demoDiv.addEventListener("click", function () {
        console.log("点击111");
    }, false);

    demoDiv.removeEventListener('click', function (event) {
        event.preventDefault();
    }, false);
</script>

ps:通过addEventListener()添加的匿名函数无法移除

特别重要：这个例子中，
使用addEventListener()添加一个事件处理程序。
虽然调用removeEventListener()
是看似使用了相同的参数，但实际上，
第二个参数与传入addEventListener()中的那一个完全不同的函数。
而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同

7. 错误的用法

<body>
    <div class="demo">点击我</div>
</body>
<script>
    let demoDiv = document.querySelector(".demo");

    function clickMy(event) {
        console.log("点击了我111");
    }
    //页面渲染完成就触发了调用函数，这是错误的用法
    demoDiv.addEventListener("click", clickMy(), false);

    demoDiv.removeEventListener('click', clickMy(), false);
</script>

8.正确的移除方法

<body>
    <div class="demo">点击我</div>
</body>
<script>
    let demoDiv = document.querySelector(".demo");

    function clickMy() {
        console.log("点击了我111");
    }
    demoDiv.addEventListener("click", clickMy, false);

    // 10s后这个事件将会被移除，没有直接去调用，没有括号
    setTimeout(() => {
        demoDiv.removeEventListener('click', clickMy, false);
    }, 10000)
</script>
//这样移除的跟传入的就是同一个函数了

标签：function,removeEventListener,demoDiv,事件,addEventListener,click
来源： https://www.cnblogs.com/IwishIcould/p/14587793.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9