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)