DOM事件类详解，有这一篇就够了

DOM事件的级别

1. DOM0 element.onclick = function(){}
2. DOM2 element.addEventListener(‘click’, funttion(){}, false)
3. DOM3 element.addEventListener(‘keyup’, funttion(){}, false)

DOM3 较 DOM2 多了很多事件类型

DOM事件流

概念： 完成的时间流分三个阶段，捕获、目标阶段、冒泡；

事件通过捕获到达目标元素，再从目标元素冒泡至window对象的过程就是事件流。

捕获：是由上至下的过程，那么事件流最先接触哪个对象呢？

答案是window对象，其次是document>>html标签>> body>>…… >>目标元素
冒泡则相反

Event 对象的常见应用

1. event.preventDefault()

阻止默认事件，比如阻止a标签跳转

2. event.stopPropagation()

阻止冒泡行为

3. event.stoplmmediatePropagation()

若一个dom元素绑定了两个点击事件a、b，若点击该元素，只想执行其中一个事件a，而阻止事件b，在a中的函数添加该行代码即可，属于事件响应的优先级

4. event.target

当5个子元素 都要绑定一个行为，为了优化我们利用事件委托，可以在其父元素上绑定该行为，并通过event.target寻找触发事件的父元素的子元素

5. event.currentTarget

仍是4的例子，可以找到当前绑定事件的对象，就是4步骤的父元素，而非子元素

自定义事件

var eve = new Event（'custome'）
element(dom节点).addEventListen('custome', function(){})
element(dom节点).dispatchEvent(eve)

**注意** Event 可以替换为 CustomEvent，区别在于CustomEvent可以接受一个对象参数

另外为了提高大家对捕获过程的理解：请观察如下代码就很明白了从上至下的捕获过程，冒泡反之

var ele = document.getElementById('id')

window.addEventListen('click',function(){console.log('触发了window层')}, true)  //第三个参数默认为false，执行冒泡机制，true为捕获阶段
document.addEventListen('click',function(){console.log('触发了document层')}, true) 
document.documentElement.addEventListen('click',function(){console.log('触发了html层')}, true) 
document.body.addEventListen('click',function(){console.log('触发了boy层')}, true)
document.body.addEventListen('click',function(){console.log('触发了boy层')}, true)
ele.addEventListen('click',function(){console.log('触发了element元素层')}, true)

点击element元素，依次打印 触发了 window、document、html、body、元素本身；绑定先后顺序无影响。