addEventListener的click和onclick的区别

Posted 7qin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了addEventListener的click和onclick的区别相关的知识,希望对你有一定的参考价值。

前两节都和addEventListener的click有关,于是在想它与onclick有什么区别呢,自己调试了一下,网上也有相关资料

事件绑定

onclick绑定方式

优点: 
- 简洁 
- 处理事件的this关键字指向当前元素 
缺点: 
- 不能对事件捕获或事件冒泡进行控制,只能使用事件冒泡,无法切换成事件捕获 
- 一次只能对一个元素绑定一个事件处理程序,当使用window.onload属性时,会覆盖采用相同方法所绑定的事件代码

//thisevent查一不大 推荐使用event对象 这样你总是可以拥有全部的可用信息

dd.onclick = function(event){
    console.log(event.target.innerhtml);//event.target指向的是dd元素,以及他的所有信息
    console.log(this.innerHTML);//this也是指向dd元素,包含他的可用信息
}

//注意:有时也会有需要使用this的情况 
//当需要鼠标移入和移出的时候 event会触发该事件每一个子元素

dd.onmouseover = function(event) {
    this.style.backgroundColor = "red";//不会改变子元素
    event.target.style.backgroundColor = ‘red‘;//会改变子元素
};
dd.onmouseout = function(event) {
    this.style.backgroundColor = "green"
    event.target.style.backgroundColor="green"
};

addEventListener绑定方式

优点: 
- 可以支持事件处理的捕获阶段,也可以支持时间处理的冒泡阶段,两个阶段都是通过addEventListener最后一个参数设置为false(默认值,表示事件冒泡)或者true(表示事件捕获)来切换 
- 事件处理 this与onclick一样 
- 事件处理函数中,event对象总是作为第一个可用参数 
- 你可以为某个元素绑定多个事件而不会覆盖之前绑定的处理程序 (按照顺序执行) 
缺点: 
- IE8以下不支持

dd.addEventListener(‘click‘,function(e){
    console.log(this.innerHTML);
    console.log( e.target.innerHTML );
},false);

技术分享图片

demo如下

<input type="button" id="iS_addEventListener" value="addEventListener">
<input type="button" id="iS_onclick" value="onclick">
    <script type="text/javascript">
        (function(){
            document.getElementById("iS_addEventListener").addEventListener("click",function(){
                        alert("我是addEventListener1");
                    },false);
            document.getElementById("iS_addEventListener").addEventListener("click",function(){
                        alert("我是addEventListener2");
                    },false);
            //onclick是重新赋值,变量提升
            document.getElementById("iS_onclick").onclick = function() {
                alert("我是onclick1");
            }
            document.getElementById("iS_onclick").onclick = function() {
                alert("我是onclick2");
            }
        })();
    </script>

 结果是onclick只出现一次alert:我是click2【很正常第一次click事件会被第二次所覆盖】,但是addEventListener却可以先后运行,不会被覆盖【正如:它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】

解除事件绑定

对于onclick,直接 dd.onclick = null;

对于addEventListener则需要,oElement.removeEventListener(sEvent,fnHandler,false);

阻止事件冒泡

e.stopPropagation(); 或 return false;

dd.onclick = function(e){
    console.log(e.target.innerHTML);
    this.style.color = ‘red‘;
    //阻止事件冒泡 
    //防止点击dd的时候隐藏了父级domClick
    e.stopPropagation();   //或 return false;
}

区别:

return 可以同时阻止冒泡,且阻止事件的默认行为> 
[比如a点击链接时跳转到百度,return false,便会阻止跳转]

event.stopPropagation(); 
阻止事件的进一步传播.(冒泡阶段和捕获阶段)

 

以上是关于addEventListener的click和onclick的区别的主要内容,如果未能解决你的问题,请参考以下文章

js添加事件和移除事件:addEventListener()与removeEventListener()

addEventListener 的三个参数

Javascript 的addEventListener()及attachEvent()区别分析

layer.confirm( 找不到 on函数

layer.confirm( 找不到 on函数

javascript绑定事件addEventListener与attachEvent