DOM的事件处理方式通常有三种方式：
- 在HTML中的事件处理方式
- DOM元素对象的属性事件绑定处理方式
- DOM元素对象的addEventListener()函数添加事件的处理方式
1. 在HTML中的事件处理方式
对于初学者来说，最开始接触的事件处理方式，就是这种了，也最容易理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Event</title>
</head>
<body>
<div id="main">
<input type="button" id="htmlEvent" value="HTML的处理方式" onclick="showMsg()"/>
</div>
<script type="text/javascript">
function showMsg() {
alert('Hello Jerry');
}
</script>
</body>
</html>
是不是很简单，只要在按钮的地方加入onclick事件绑定点击事件处理的函数，就完成了事件处理。
可是如果我的处理函数改了名字，那意味着需要改两个地方，如果一个项目到处都是这样的事件绑定，一旦修改了需求，后果可想而知。这样的处理方式把HTML和js高度耦合在了一起，是非常不明智的做法，那么要怎么来改进呢，就有了接下来的第二种处理方式。
2. DOM元素对象的属性事件绑定处理方式
我们来思考下，当点击或者其它的事件触发需要哪些条件：
- 找到需要触发事件的DOM标签元素对象
- 给这个元素对象绑定上事件
- 事件需要处理的功能程序
思考： 其实这样的事件触发条件的思路，哪个语言的程序编写都是这样，比如Android的OnClickListener点击事件的接口绑定，这样横向的思考比较其它平台的程序编写，有助于提升到更高一级的视角来看待程序本身(所谓语言设计的原则----上帝视角)。
那好我们就按上面的三个条件来编写代码：
<div id="main">
<input type="button" id="htmlEvent" value="HTML的处理方式" onclick="showMsg()"/>
<input type="button" id="domEvent" value="DOM对象属性事件方式"/>
</div>
<script type="text/javascript">
function showMsg() {
alert('Hello Jerry');
}
/*** 第二种方式：DOM元素对象的属性事件绑定处理 ***/
// 1. 获取需要触发事件的标签元素对象
var domObj = document.getElementById('domEvent');
// 2. 给这个元素的点击事件绑定上处理的功能程序，这里使用了一个匿名函数
domObj.onclick = function() {
// 3. 在匿名函数里处理功能程序
alert('domEvent');
};
// 删除点击事件
domObj.onclick = null;
</script>
这样的处理方式有个好处就是避免了html代码和JS代码的耦合，动态的去给元素标签对象绑定事件，实际开发中也极大的提高了项目的可维护性和扩展性。
3. DOM元素对象的addEventListener()函数添加事件的处理方式
...<!--此处省略一些代码，在div中-->
<input type="button" id="domEventListener" value="DOM对象addEventListener()函数的事件方式"/>
...<!--此处省略一些代码，在script脚本中-->
/*** 第三种方式：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三个参数的意思：
- 第一个参数，需要绑定的事件，这里我们通常使用到的“onclick、onmouseover、onfocus”等等事件一律把“on”字符去掉。
- 第二个参数，就是事件处理的功能程序
- 第三个参数，是事件冒泡阶段是否移除句柄也就是功能处理程序
下图是官方的说法：
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的事件处理方式讲完了，有什么不太明白的，可以留言评论。
网友评论