javaScript的事件对象

事件流模型

描述的是从页面中接收事件的顺序

事件流主要分为三种

1. 事件冒泡流（IE时间流）
2. 事件捕获流（Netscape事件流)
3. DOM事件流

IE事件流和DOM事件流的区别

点击查看具体区别

DOM事件流的三个阶段

• 捕获阶段（网景公司提出）：从外到内 window–document–html–div
• 当前目标阶段
• 冒泡阶段（IE提出）：从内到外 div–html–document–window

面试题：传统事件绑定和符合w3c标准的事件绑定有什么不同

传统事件绑定：

<input class="btn" type="button" onclick="clickEvent">
document.getElementsByClassName('btn')[0].onclick = function() {}

w3c标准事件绑定：

btn.addEventListener('click', function() {}, false)  
btn.attachEvent('onclick', function() {}) // IE9以前版本支持

删除传统事件绑定：

<input class="btn" type="button" onclick="clickEvent">
document.getElementsByClassName('btn')[0].onclick = null;

删除w3c标准事件绑定：

btn.removeEventListener('click', linsenerName, false) 
btn.detachEvent('onclick', function() {}) // IE9以前版本支持

【注】

1. addEventListener，第三个参默认是false，代表冒泡事件，也可以是对象，有三个属性：

属性	作用
capture	布尔值，和 useCapture 作用一样
once	布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
passive	布尔值，表示永远不会调用 preventDefault

2. onclick和attachEvent只能得到冒泡阶段，有些事件没有冒泡 eg:onblur, onfucus, onmouseover,onmouseleave
3. 事件触发一般来说会按照DOM事件流三个阶段的顺序进行，但是也有特例，如果给一个 body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行

阻止事件冒泡和默认事件

阻止事件冒泡：

标准写法：event.stopPropogation（）
IE中的写法(属性)：event.cancelBubble = true

阻止默认事件

标准写法：event.preventDefault()
IE中的属性：event.returnValue = false

【注】

1. event.stopPropogation（）也可以阻止事件捕获
2. stopImmediatePropagation同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

事件对象的补充

• event.target 返回的是触发事件的对象
• this 返回的是绑定事件的对象
• event.type 返回的是不带on
• 事件对象的兼容性写法： event || window.event
• 事件目标的兼容性写法： event.target || event.srcElement

事件委托

1. 事件委托又称事件代理，在JQuery中称事件委派
2. 原理：不是每个子结点要单独设置一个事件监听器，而是事件监听器设置在父结点上，然后利用事件冒泡原理影响设置每个子结点。
3. 作用：只操作了一次DOM，提高了程序的性能，不需要给子节点注销事件，节省内存