系统学习DOM事件机制
本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址：https://coding.imooc.com/class/evaluation/129.html#Anchor。
本文将从以下几个方面介绍DOM事件：
- 基本概念：DOM事件的级别
- DOM事件模型，事件流
- 描述DOM事件捕获的具体流程
- Event对象的常见应用
- 自定义事件
DOM事件的级别
//DOM0 element.onclick = function(){} //DOM2 element.addEventListener('click',function(){},false) //DOM3 element.addEventListener('onmouseover',function(){},false)
先解答一个小疑问：为啥没有DOM1级事件呢？
因为在1级DOM标准中没有定义与事件有关的内容，所以事件的级别是没有DOM1的。
下面简单介绍dom0，2，3的区别
0级是最早的，而且目前所有的浏览器仍支持0级DOM模型。缺点是一个事件的处理程序只能对应一个函数
删除DOM0事件处理程序，只要将对应事件属性置为null即可。
在2级模型中可以为特定对象的事件注册多个事件监听。
2级事件的删除
removeEventListener("click",function(){},false);
3级事件的操作方式和2级事件是一样的。DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。dom对以下事件做了改动
- UI事件
- 焦点事件
- 鼠标事件
- 滚轮事件
- 文本事件
- 键盘事件
- 合成事件
- 变动事件
关于dom事件级别更多相关内容，推荐大家一篇文章，写的挺详细的。传送门
另：dom3中还定义了自定义事件，在文章下面中会讲到
事件模型 事件流
定义：
1.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
2.事件就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。
3.事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)
这两个事件流分别的是IE公司和netspace公司提出来的，冒泡事件流支持的浏览器更多。
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
描述DOM事件捕获的具体流程
事件捕获示意图
和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行。
下面通过代码示例来感受一下
<body>
<div id="ev">
<style media="screen">
#ev{
width: 300px;
height: 100px;
background: red;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
目标元素
</div>
<script type="text/javascript">
var ev = document.getElementById('ev');
ev.addEventListener('click', function (e) {
console.log('ev captrue');
}, true);
window.addEventListener('click', function (e) {
console.log('window captrue');
}, true);
document.addEventListener('click', function (e) {
console.log('document captrue');
}, true);
document.documentElement.addEventListener('click', function (e) {
console.log('html captrue');
}, true);
document.body.addEventListener('click', function (e) {
console.log('body captrue');
}, true);
</script>
</body>
输出结果
这个例子很好的验证了捕获是由上到下的。
注意：最上层的是window而不是html。
Event对象的常见应用
event对象的方法是有很多的，像鼠标位置键盘key值的这样的就不多说了，下面介绍几个我认为比较重要的。
1.event.preventDefault()
此方法用来阻止默认的事件，比如阻止a标签的跳转。用法：
dom.addEventListener('click',function(event){
event.preventDefault()
},false)
2.event.stopPropagation()
阻止冒泡；让事件停留在当前dom而不会向上传递，
3.event.stopImmediatePropagation()
stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。
4.event.target
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
来一段代码
<html> <head> <script type="text/javascript"> function getEventTrigger(event) { x=event.target; alert("The id of the triggered element: " + x.id); } </script> </head> <body > <p id="p1" onmousedown="getEventTrigger(event)"> Click on this paragraph. An alert box will show which element triggered the event.</p> </body> </html>
输出结果
5.event.currentTarget
currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
与event.target的区别
event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素
代码：
<html> <head> <script type="text/javascript"> function getEventTrigger(event) { x=event.currentTarget; alert("The id of the triggered element: " + x.id); } </script> </head> <body > <p id="p1" onmousedown="getEventTrigger(event)"> Click on this paragraph. An alert box will show which element triggered the event.</p> </body> </html>
结果
自定义事件
这部分直接通过代码来感受一下吧
var eve = new Event('test');
ev.addEventListener('test', function () {
console.log('test dispatch');
});
setTimeout(function () {
ev.dispatchEvent(eve);
}, 1000)
一秒钟后，控制台打印
