3类事件注册

传统注册事件

html上注册

<button onclick="alert('哈哈哈')">点击我</button>

效果：

DOM0级

var button = document.querySelector('button');
button.onclick = function() {
    alert('嘻嘻嘻');
}

效果：

h5新增

var button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('呵呵呵');
})

效果是一样的

不同点

1.传统的方式具有唯一性，当同一个事件注册多个相同的事件时，后面的事件会覆盖前面的事件。
2.addEventListener则同一个元素同一个事件可以注册多个监听器，并按照注册顺序执行。
3.addEventListener中的第三个参数，当参数为true时为事件捕获，当参数为false或空时为冒泡阶段。

删除事件

传统

button.onclick = null;

addEventListener

button.removeEventListener('click',function(){})