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>
//这样移除的跟传入的就是同一个函数了

9.addEventListener()与removeEventListener()的第三个参数详解


布尔值参数是true,表示事件捕获
就是最不具体的节点先接收事件,
最具体的节点最后接收事件
(我们可以理解为;点击一个具体的元素,先触发顶级的节点,
然后向下进行传递,知道被点击的那个具体元素)
true捕获,false冒泡

如果是false,
开启事件冒泡
则是先寻找【具体指定的位置】由【最具体的元素】接收,
然后【逐级向上传播】至最不具体的元素的节点(或者说顶级节点)(文档)

click与addEventListener和removeEventListener事件详解-编程知识网

10.开启冒泡

<body>
    <div id="out">
        <p>我没有用,我只占位</p>
        <div id="middle">
            <div id="inner">最里面</div>
        </div>
    </div>
</body>
<script>
    var out = document.getElementById('out');
    var middle = document.getElementById('middle');
    var inner = document.getElementById('inner');

    //点击inner时,触发顺序为:inner-------middle------out
    // 因为第三个参数是false,开启了事件冒泡
    out.addEventListener('click', function () {
        alert("我是最外面的");
    }, false);

    middle.addEventListener('click', function () {
        alert("我是中间的");
    }, false);

    inner.addEventListener('click', function () {
        alert("我是最里面的");
    }, false);
</script>

11.开启捕获

<body>
    <div id="out">
        <p>我没有用,我只占位</p>
        <div id="middle">
            <div id="inner">最里面</div>
        </div>
    </div>
</body>
<script>
    var out = document.getElementById('out');
    var middle = document.getElementById('middle');
    var inner = document.getElementById('inner');

    //点击inner时,触发顺序为:out -------middle------inner
    // 因为第三个参数是true开启了捕获
    out.addEventListener('click', function () {
        alert("我是最外面的");
    }, true);

    middle.addEventListener('click', function () {
        alert("我是中间的");
    }, true);

    inner.addEventListener('click', function () {
        alert("我是最里面的");
    }, true);
</script>

12.得出结论


<body>
    <div id="out">
        <p>我没有用,我只占位</p>
        <div id="middle">
            <div id="inner">最里面</div>
        </div>
    </div>
</body>
<script>
    var out = document.getElementById('out');
    var middle = document.getElementById('middle');
    var inner = document.getElementById('inner');

    //点击inner时,触发顺序为:out------inner-------middle
    out.addEventListener('click', function () {
        alert("我是最外面的");
    }, true);

    middle.addEventListener('click', function () {
        alert("我是中间的");
    }, false);

    inner.addEventListener('click', function () {
        alert("我是最里面的");
    }, false);

    // 结论:
    // 第一条结论:true的触发顺序总是在false前面
    // 第二条结论:如果多个均为true 则外层触发先于内层; 因为true是捕获,所以先触发外层
    // 第三条结论:如果多个均为false 则内层触发先于外层  因为false是冒泡,所以先触发内层

</script>

文章参考的地址有:https://blog.csdn.net/gabby____/article/details/81812064

作者:明月人倚楼
出处:https://www.cnblogs.com/IwishIcould/

想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

click与addEventListener和removeEventListener事件详解-编程知识网
微信

本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。