js基础-事件处理程序

本文旨在简单梳理事件处理程序的几种方式~~~

js事件处理程序的几种方式

参考：[http://wiki.jikexueyuan.com/project/brief-talk-js/event-handlers.html]

• HTML 事件处理程序

• js 指定事件处理程序

  • DOM0级事件处理程序
  • DOM2级事件处理程序

• IE 事件处理程序

HTML 事件处理程序

两个缺点:

1. 存在时差问题
2. html 和 js 代码紧密结合

js 指定事件处理程序

DOM0级

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

btn.onclick = function () {}

删除DOM0级事件处理程序，btn.onclick = null

DOM2级

DOM2级定义了两个方法，用于处理指定和删除处理程序的操作：
addEventListener() removeEventListener(), 所有DOM节点都包含这两个方法，并接受三个参数：要处理的（事件名，函数，布尔值）。最后参数,true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序

IE事件处理程序

IE 实现了与DOM 中类似的两个方法：attachEvent() 和 detachEvent(),接受两个参数：（事件名，函数）

IE实现和DOM 异同点：

• 相同点：

1. 都可为一个元素添加多个事件处理程序
2. 都有两个方法

• 不同点：

1. 两个方法不同
2. DOM级 添加的程序是以添加的顺序执行，IE实现是以相反的顺序被触发

最终版，跨浏览器事件处理程序兼容写法

参考：[https://juejin.im/entry/596e0eaa6fb9a06bb95af4b8]

var EventUtil = {
    addHandler: function (element, event_name, handler_fn) {
        if (element.addEventLister) {
            element.addEventLister(event_name, handler_fn. false)
        } else if (element.attchEvent) {
            element.attachEvent('on' + event_name, handler_fn)
        } else {
            element.['on' + event_name] = handler_fn
        }
    },
    
    removeHandler: function (element, event_name, handler_fn) {
        if (element.addEventLister) {
            element.removeEventListener(event_name, handler_fn. false)
        } else if (element.attchEvent) {
            element.detachEvent('on' + event_name, handler_fn)
        } else {
            element.['on' + event_name] = null
        }
}


// 使用：
EventUtil.addHandler(btn,'click', handler)
EventUtil.removeHandler(btn,'click', handler)