事件处理程序

为响应时间而调用的函数被称为事件处理程度（或事件监听器）

创建和移除

1. DOM0

• on + 事件名

element.onclick = function() {}

• 通过设置为 null，移除事件处理程序

element.onclick = null

2. DOM2

• addEventListener

• 事件名、事件处理函数、事件流

element.addEventListener('click', function() {}, false)

• 通过 removeEventListener 移除事件处理程序，参数与 addEventListener 一致，传入的事件处理函数必须是同一个指针

element.removeEventListener('click', function() {}, false)

优势是可以为同一个事件添加多个事件处理程序

element.addEventListener('click', function() { console.log('hello') })
element.addEventListener('click', function() { console.log('world') })
// 点击 element 元素
// 打印 helloworld

3. IE

• attachEvent
• on+事件名、事件处理函数

element.attachEvent('onclick', function() {})

• 通过 detachEvent 移除事件处理程序，参数与 attachEvent 一致，传入的事件处理函数必须是同一个指针

element.detachEvent('onclick', function() {})

与 addEventListener 的不同

1. this 指向 window
2. 可以为同一个事件添加多个事件处理程序，但执行顺序相反，即后添加的先执行

定义跨浏览器事件处理程序

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false)
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
        } else {
            element['on' + type] = handler
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler)
        } else {
            element['on' + type] = null
        }
    }
}

上面的处理程序可以解决大部分问题

但是没有解决 IE 作用域和多个处理程序时的顺序问题