DOM的事件处理方式

DOM的事件处理方式通常有三种方式：

• 在HTML中的事件处理方式
• DOM元素对象的属性事件绑定处理方式
• DOM元素对象的addEventListener()函数添加事件的处理方式

1. 在HTML中的事件处理方式

对于初学者来说，最开始接触的事件处理方式，就是这种了，也最容易理解：

是不是很简单，只要在按钮的地方加入onclick事件绑定点击事件处理的函数，就完成了事件处理。
可是如果我的处理函数改了名字，那意味着需要改两个地方，如果一个项目到处都是这样的事件绑定，一旦修改了需求，后果可想而知。这样的处理方式把HTML和js高度耦合在了一起，是非常不明智的做法，那么要怎么来改进呢，就有了接下来的第二种处理方式。

2. DOM元素对象的属性事件绑定处理方式

我们来思考下，当点击或者其它的事件触发需要哪些条件：

• 找到需要触发事件的DOM标签元素对象
• 给这个元素对象绑定上事件
• 事件需要处理的功能程序

思考： 其实这样的事件触发条件的思路，哪个语言的程序编写都是这样，比如Android的OnClickListener点击事件的接口绑定，这样横向的思考比较其它平台的程序编写，有助于提升到更高一级的视角来看待程序本身(所谓语言设计的原则----上帝视角)。

那好我们就按上面的三个条件来编写代码：

这样的处理方式有个好处就是避免了html代码和JS代码的耦合，动态的去给元素标签对象绑定事件，实际开发中也极大的提高了项目的可维护性和扩展性。

3. DOM元素对象的addEventListener()函数添加事件的处理方式

...


...
/*** 第三种方式：DOM元素对象的addEventListener()函数添加事件的处理 ***/
// 1. 获取需要触发事件的标签元素对象
var domListenerObj = document.getElementById('domEventListener');
// 3. 在匿名函数里处理功能程序
var oneClick = function() {
    alert('DOM元素对象的addEventListener()函数添加事件的处理');
};
// 2. 通过addEventListener函数给domListenerObj对象绑定上点击事件
domListenerObj.addEventListener('click', oneClick, false);
// 可以多次给同一个事件绑定不同的功能处理操作
domListenerObj.addEventListener('click', function() {
    alert('ok 我还是listener的动态事件绑定方式，第二次点击');
}, false);
// 删除绑定的事件对应的功能操作
domListenerObj.removeEventListener('click', oneClick, false);

首先介绍下addEventListener和removeEventListener三个参数的意思：

1. 第一个参数，需要绑定的事件，这里我们通常使用到的“onclick、onmouseover、onfocus”等等事件一律把“on”字符去掉。
2. 第二个参数，就是事件处理的功能程序
3. 第三个参数，是事件冒泡阶段是否移除句柄也就是功能处理程序
   下图是官方的说法：

addEventListener参数官方说明.png

注意：上面通过addEventListener来添加事件监听的方式在有些浏览器是不兼容，如：Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持，对于这样不支持的浏览器可以使用attachEvent()和detachEvent()来解决。

// 添加事件，注意事件类型得加上“on”前缀
domListenerObj.attachEvent('onclick', oneClick);
// 删除事件
domListenerObj.detachEvent('onclick', oneClick);

我相信有的小伙伴会说，那这样一会addEventListener，一会又attachEvent的，到底用哪一个，怎么兼容所有的浏览器呢，下面就来不同浏览器之间的解决兼容性问题。

4. 解决IE、Opera等老版本浏览器，对于事件处理函数不兼容的问题

我们来封装一个工具类对象便于通用：

// 事件工具辅助类的封装
var EventHelper = {
    // 添加事件
    addEvent: function (element, type, func) {
        if(element.addEventListener){
            element.addEventListener(type, func, false);
        }else if (element.attachEvent) {
            // 兼容IE、Opera等老版本浏览器的事件处理
            element.attachEvent('on' + type, func);
        }else {
            // 如果以上两种方式都不支持，那就直接在元素对象的属性上绑定事件处理
            element['on' + type] = func;
        }
    },
    // 删除事件
    removeEvent: function (element, type, func) {
        if(element.removeEventListener){
            element.removeEventListener(type, func, false);
        }else if (element.attachEvent) {
            element.detachEvent('on' + type, func);
        }else {
            element['on' + type] = null;
        }
    }
};

/*** 封装类对象的使用 ***/
// 添加事件
EventHelper.addEvent(domListenerObj, 'click', oneClick);
// 删除事件
EventHelper.removeEvent(domListenerObj, 'click', oneClick);

---

至此DOM的事件处理方式讲完了，有什么不太明白的，可以留言评论。