前端知识汇总【面试用】（二）

2 事件

2.1 事件流

1、事件冒泡（IE事件流）

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）节点，然后逐级向上传播到较为不具体的节点（文档）。

所有浏览器均支持

2、事件捕获

与冒泡刚好相反，所有浏览器均支持，不过不建议使用

3、DOM事件流

DOM2级事件流规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

IE9及其他非IE内核的浏览器均支持，不过在捕获阶段会触发事件对象上的事件，结果就是有两个机会在目标对象上操作事件。

2.2 事件处理程序

1、HTML事件处理程序(不建议使用)

<input type="button" value="Click Me" onclick="alert('Clicked')"/>

2、DOM0级事件处理程序（冒泡阶段被处理，作用域为所属元素，仅支持一个）

var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert(this.id); //"myBtn"
};
btn.onclick=null; //删除事件处理程序

3、DOM2级别事件处理程序（IE9以及其他非IE内核均支持，支持多个事件）

addEventListener()/removeEventListener()

所有DOM节点都包含这两个方法，接受三个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值（true在捕获阶段调用；false在冒泡阶段调用）;addEventListener()添加的事件只能使用removeEventListener()移除，传入参数需要一致，因此添加的匿名函数无法移除。

var btn=document.getElementById("myBtn");
var handler=function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false); //有效

4、IE事件处理程序(IE/Opera支持、冒泡阶段截获，支持多个事件)

attachEvent()/detachEvent()

接受两个参数：事件处理程序名称与事件处理程序函数

与DOM0主要区别在于作用域（this等于window）

var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert(this==window); //true
});//匿名函数同不能detach

5、跨浏览器事件处理程序（冒泡阶段捕获）

存在DOM2，则使用该方法；存在IE的方法则采用第二种（注意加上On）；最后再使用DOM0

var EventUtil={       //特定对象
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type}=handler;
}
},
//移除代码省略
//下面是如何使用
var btn=document.getElementById("myBtn");
var handler=function(){
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);

2.3 事件对象

1、DOM中事件对象（DOM0和DOM2）

event.type、event.target(事件真正的目标对象)、event.CurrentTarget(事件注册的元素对象)

2、IE中事件对象

event.type(同上)、event.secElement(同上中target)