JS深入基础之addEventListener和onClick()的区别

addEventListener和onClick()的区别

addEventListener()可以为事件目标注册事件处理程序。

它接受三个参数，第一个参数是要注册处理程序的类型，但他不包括设置事件处理程序属性的前缀on，第二个参数是事件发生时所调用的函数，第三个默认为false，如果为true，那么将注册为不惑事件处理程序。

下面来看一个例子来标识addEventListener和onclick的区别

<button id = "mybutton">click me</button>
<script>
    var b = document.getElementById("mybutton")
    b.onclick = function(){
        alert('onclick')
    }
    b.addEventListener('click',function(){
        alert('addEventListener')
    },false)
</script>

以click参数调用addEventListener并不会影响到onclick的值，但如果是两个onclick后面一个会覆盖前面一个。以上代码会alert两次。 同时更重要的是，能通过多次调用addEventListener，为同一个目标，同一种注册类型，注册不同的处理函数。当对象上发生事件时，所有该时间类型的注册处理程序都会按照注册的顺序调用。

当目标相同，且三个参数都一样的时候。多次调用addEventListener是没用的。