js基础-事件处理程序

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

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

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

HTML 事件处理程序

js 指定事件处理程序

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

IE 事件处理程序

HTML 事件处理程序

两个缺点:

存在时差问题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 异同点：

相同点： 都可为一个元素添加多个事件处理程序都有两个方法 不同点： 两个方法不同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)