onclick和addEventListener的区别

最新推荐文章于 2024-02-08 07:45:00 发布

新手小白求教

最新推荐文章于 2024-02-08 07:45:00 发布

阅读量414

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46077178/article/details/104877354

版权

一、onclick：

1.onclick添加事件：
语法：

element.onclick = function (){};

实例如下：

<body>
    <div class="box">
        <div id="box1"">点我</div>
    </div>
</body>
<script>
    var box1 = document.getElementById("box1");

    box1.onclick = function(){
        console.log("我是第一个");
    }
    box1.onclick = function(){
        console.log("我是第二个");
    }
</script>

结果：
在这里插入图片描述
以上结果显示，点了6次“点我” , 其结果都是“我是第二个”，不会出现我是第一个。

由此我们可知：一个click处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次，但是仍然只会出现最后的一次绑定。

2.onclick删除事件：
语法：

element.onclick = null;

二、addEventlistener：
1.addEventlistener添加事件监听器：
语法：

element.addEventListener(事件名，处理函数，布尔值);

实例如下：

<body>
    <div class="box">
        <div id="box1">点我</div>
    </div>
</body>
<script>
    var box1 = document.getElementById("box1");

    box1.addEventListener ("click",function(){
        console.log("我是第一个");
    },false);
    box1.addEventListener ("click",function(){
        console.log("我是第二个");
    },false);
</script>

结果：
在这里插入图片描述
两次绑定的事件，都能够成功运行，也就是点击一次，两个结果都会打印。

由此我们可知：对于一个可以绑定的事件对象，想多次绑定事件都能运行，选用addEventListener.
注意：addEventlistener事件名不带on，处理函数为函数引用，布尔值代表冒泡(内到外)或捕获（外到内）。

2.当布尔值为false时，代表事件冒泡：

element.addEventListener(“click”,function(){},false);

3.当布尔值为true时，代表事件捕获：

element.addEventListener(“click”,function(){},true);

4.移除事件监听器：

removeEventListener(事件名，处理函数);

// IE8及以下的事件监听器, 注意：事件名带o：
attachEvent(事件名，处理函数);

detachEvent(事件名，处理函数);

示例如下：

var btn = document.getElementById("myBtn");
//所有主流浏览器，除了 IE 8 及更早 IE版本
if (btn .addEventListener) {    
    btn .addEventListener("click", myFunction);
  // IE 8 及更早 IE 版本
} else if (btn .attachEvent) {                  
    btn .attachEvent("onclick", myFunction);
}

通过addEventListener添加的事件必须通过相对应的为removeListener注销事件。但是如果像上面的用匿名函数的方式注册的事件，不能使用removeListener注销，因为没用对应事件的引用。

所以注册事件如果需要取消，最好使用一个引用，即：

var eveName= function () {
    // ...
};

注意：这种方式，对于一个对象多次绑定同样的eveName，那么不会重复执行，只会执行一次。对于上面的匿名函数，就算内容一样，也会依次执行，因为并不能算是相同事件处理器；
里面的this引用，不是window对象，而是触发事件的元素的引用。

5.补充-----阻止事件冒泡及事件委托的封装函数：
①阻止事件冒泡

function stopBubble(eve){
    if(event.stopPropagation){
        eve.stopPropagation();
    }else{
        eve.cancelBubble=true;
    }
}

②事件委托：

function eveEnt(child,cb){
    return function(eve){
        let e = eve || window.eveEnt;
        let targetEle = e.target || e.srcElement;
        for(let i=0;i<child.length;i++){
            if(child[i] == targetEle){
                cb.call(targetEle)();
            }
        }
    }
}

总结：

1.onclick 只能给元素注册一个事件，如果存在多个，则后面的事件会覆盖前面的事件；

2.addEventListener允许给一个事件注册多个listener监听器，添加的事件不会覆盖已存在的事件；

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

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

5.IE8及以下、Opera 7.0 及 Opera 更早版本可以使用attachEvent(事件名，处理函数)和detachEvent(事件名，处理函数)，注意：事件名带on。

新手小白求教

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onclick和addEventListener的区别

一、onclick：1.onclick添加事件：语法：element.onclick = function (){};实例如下：<body> <div class="box"> <div id="box1"">点我</div> </div></body><script&gt...
复制链接

扫一扫