关于onclick和addEventListener('click')的整理

click

代码

$(function(){
    $("#btn").click(function(){
        console.log(2)
    })
    $("#btn").click(function(){
        console.log(1)
    })
    $("#btn").click(function(){
        console.log(3)
    })
})

这个点击结果是输出2，1，3
因为你此处相当于绑定了click，在你没解绑之前，他依然具有第一个事件的，所以他会继续之前一个；
原生

document.getElementById("btn").addEventListener("click",function(){
    console.log(10)
},false)
document.getElementById("btn").addEventListener("click",function(){
    console.log(11)
},false)
document.getElementById("btn").addEventListener("click",function(){
    console.log(12)},false);

而onclick：
是重新赋值，变量提升

document.getElementById("btn").οnclick=function(){
    console.log(1)
}
document.getElementById("btn").οnclick=function(){
    console.log(2)
}
document.getElementById("btn").οnclick=function(){
    console.log(3)
}

最终结果是3

addEventListener

addEventListener是W3C DOM中提供的注册时间监听器的方法。

1、它允许给一个事件注册多个监听器。在使用DHTML库或者Mozilla extensions这样需要保证nenggou7和其他的库或者差距并存的时候非常有用。

2、它提供了一种更精细的手段控制事件监听器的触发阶段，（即可以选择捕获或者冒泡）。

3、他对任何DOM元素都是有效的，而不仅仅只对HTMLK元素有效。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

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

<ul id="color-list">
    <li id="addEvent">red</li>
    <li id="on_click">yellow</li>
</ul>
    <script type="text/javascript">
        (function(){
            var addEvent = document.getElementById("addEvent");
                    addEvent.addEventListener("click",function(){
                        alert("我是addEvent1");
                    },false);
                    addEvent.addEventListener("click",function(){
                        alert("我是addEvent2");
                    },false);

            var addEvent = document.getElementById("on_click"); 

            on_click.onclick = function() {
                alert("我是click1");
            }
            on_click.onclick = function() {
                alert("我是click2");
            }
        })();
    </script>