DOM事件类
基本概念：
DOM事件的级别
DOM事件模型
DOM事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件
1、DOM事件的级别
DOM0 element.οnclick=function(){}DOM2 element.addEventListener('click',function(){},false)DOM3 element.addEventListener('keyup',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中还定义了自定义事件，在文章下面中会讲到
2、事件模型
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。3、描述DOM事件捕获的具体流程
4、event对象的常见应用
event.preventDefault()： 阻止默认事件
event.stopPropagation(): 阻止冒泡行为
event.stopImmediateProgation(): 阻止下一个事件响应
event.CurrentTarget(): 当前点击的事件
event.target(): 当前被点击的元素
5、自定义事件
var eve = new Event('test'); ev.addEventListener('test', function () { console.log('test dispatch'); }); setTimeout(function () { ev.dispatchEvent(eve); }, 1000)
代码
var ev=document.getElementById('ev'); window.addEventListener('click',function(){ console.log('window capture'); },true);//true捕获触发，false冒泡触发 document.addEventListener('click',function(){ console.log('document capture'); },true); document.documentElement.addEventListener('click',function(){ console.log('html capture'); },true); document.body.addEventListener('click',function(){ console.log('body capture'); },true); ev.addEventListener('click',function(){ console.log('ev capture'); },true);
结果：
