一、
-
事件：文档或浏览器窗口中发生的一些特定的交互空间，如点击事件，鼠标移动事件等。
-
事件流：从页面中接收事件的顺序。
事件流有事件冒泡流和事件捕获流两种。
IE的事件流是事件冒泡流，从最具体的元素接收，逐级向上传播到较为不具体的元素
事件捕获流：从不具体的元素传播到具体的元素。
(将事件处理程序添加到事件流的冒泡阶段，可以最大限度地兼容各种浏览器）
二、
- 添加事件处理程序的三种方法：addEventListener，on+事件名，attachEvent；
-
addEventListener 是添加DOM2级事件处理程序的方法
可以添加多个事件处理程序，按照添加的顺序执行
element.addEventListener(event,callback,true/false);
inner.addEventListener('click',function(e){
//code here;
},true);
(删除事件处理程序：
element.removeEventListener()
)
-
on+事件名 是添加DOM0级事件处理程序的方法
不可以用来添加多个事件处理程序
element.onclick = function(e) {
//code here;
}
(删除事件处理程序：
element.onclick=null
)
-
attachEvent 是 IE6-IE10 添加事件处理程序的方法
可以添加多个事件处理程序，按照添加的顺序反向执行
attachEvent()方法注册的事件处理程序，会在全局作用域中运行，因此函数中的this等于window
element.attachEvent('onclick',function(e){
//code here;
}
（删除事件处理程序：
detachEvent()
）
三、
- DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
- 用 addEventListener 注册为 true 的事件处理程序在捕获阶段发生，
用 addEventListener 注册为 false 或者 on+事件名 的事件处理程序在 冒泡 阶段发生，
用 attachEvent 注册的事件处理程序在冒泡阶段发生。
- DOM事件流中，实际的目标在捕获阶段不会接收到事件，处于目标阶段，事件在目标上发生并当做冒泡阶段的一部分，作为冒泡阶段的起点，然后一直向上传播。
- IE9、Safari、Chrome、firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件，结果就有两个机会在目标对象上操作事件，而且当处于目标阶段的时候，目标的捕获事件处理程序和目标的冒泡事件处理程序对目标而言都是事件处理程序，事件处理程序按照代码书写顺序（即绑定顺序）发生，而不是先发生目标的捕获事件处理程序再发生冒泡处理程序（注意是对于目标而言）。
四、
-
e: 在IE中通过DOM0级添加的事件处理程序中，e是作为全局对象，可通过window.event获得；在IE中通过attachEvent 方法添加的事件处理程序，event需要作为参数传入。
-
e.target :指向最初触发事件的 DOM 元素。
e.currentTarget: 指向正在进行的事件处理程序所绑定的元素。
e.srcElement: IE6-8没有e.target属性而是e.srcElement;
-
this 在事件处理函数内部代表事件的目标元素，等同于e.currentTarget
-
e.type 被触发的事件类型
五、
- 阻止事件冒泡
stopPropagation()取消事件的进一步捕获或冒泡；
IE中使用cancelBubble = true;
-
preventDefault()：阻止特定事件的默认行为，cancelable属性设置为true才可以使用；
IE中使用returnValue = false
六、
- 影响页面性能：
事件处理程序的数量关系到页面的整体运行性能
原因：
1.每个事件处理程序都是函数，函数都是对象，会占用内存，内存中对象越多，性能就越差。
2.必须事先指定所有事件处理程序而导致DOM的访问次数，会延迟整个页面的交互就绪时间。
解决方案：
1.事件委托（限制连接建立的数量）
在DOM树上尽量最高的层次添加一个事件处理程序，根据触发事件的目标的属性执行相应的代码。
2.内存中留有的过时不用的空事件处理程序占用页面内存也会影响性能。
解决：移除事件处理程序，确保内存可以被再次利用：
空事件处理程序的产生：
1.移除带有事件处理程序的元素时（如removeChild和使用innerHTML替换），元素和事件处理程序都保留在内存中，没有被当做垃圾回收，因此需要手工移除事件处理程序。
2：卸载页面的时候。
网友评论