on-event事件处理器与addEventListener区别

1. on-event

我们通常将通过on-event函数绑定的叫事件处理器（handler event）

on-event 属于 DOM level 0 events，最早提出的规范

这种事件处理方式，是将指定的事件注册到元素上实现的，作为一个元素属性

var t = document.getElementById('demo')
t.onclick = function() { }

因为是作为元素属性而绑定的，所以这个事件会被覆盖，因此它不可能同时绑定两个onclick事件

而且它并不支持事件捕获，可以看出，它并没有提供事件选项给我们，默认只支持事件冒泡

但它清除事件处理器很方便，直接将属性置空即可

t.onclick = null

2. addEventListener

on-event 属于 DOM level 2 events，DOM二级事件

比较主流

用法

var t = document.getElementById('demo')
t.addEventListener('click', function(){ }, false)

第一个参数指定要注册到元素上的事件
第二个参数是事件触发后执行的回调函数
第三个参数指定监听器的触发阶段，事件冒泡或者事件捕获

它可以给元素同时监听多个相同的事件而不会冲突，并且可以指定事件监听的触发阶段（这里涉及到事件流的概念），事件冒泡和事件捕获

清除事件的时候要稍显麻烦点

var t = document.getElementById('demo')
// 不能将回调函数写成匿名函数，否则无法清除
var cb = function () { }
t.addEventListener('click', cb, false)
// 事件类型和触发阶段也要对应上
t.removeEventlistener('click', cb, false)