<html>
<body>
<div id="btn"></div>
</body>
</html>
div-〉body->html->document
document-〉html->body->div
var f1=function1(){};
var f2=function2(){};
btn.addEventListener("click",f1,bool);(true:表示在捕获阶段调用函数，false:表示在冒泡阶段调用函数)
btn.addEventListener("click",f2,bool);（可添加多个处理程序）
btn.removeEventListener("click",f2,bool);(移除处理程序)
var btn=document.getElementById("btn");
var f1=function1(){};
var f2=function2(){};
btn.attachEvent("onclick",f1)
btn.detachEvent("click",f1);
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
}
}
}
<body>
<div id="btn"></div>
</body>
</html>
1.事件冒泡(事件沿dom树向上传播，直至document对象)
为div添加点击事件，click事件的传播顺序：div-〉body->html->document
2.捕获事件
click事件的传播顺序(document对象接收到事件，然后沿dom树向下传播)document-〉html->body->div
3.dom事件流的三个阶段：
1.事件捕获阶段，处于目标阶段，事件捕获阶段4.addEventListener和removeEventListener（一般在事件冒泡阶段添加处理程序）
var btn=document.getElementById("btn");var f1=function1(){};
var f2=function2(){};
btn.addEventListener("click",f1,bool);(true:表示在捕获阶段调用函数，false:表示在冒泡阶段调用函数)
btn.addEventListener("click",f2,bool);（可添加多个处理程序）
btn.removeEventListener("click",f2,bool);(移除处理程序)
5.ie8之前的事件处理程序
attachEvent和detachEventvar btn=document.getElementById("btn");
var f1=function1(){};
var f2=function2(){};
btn.attachEvent("onclick",f1)
btn.detachEvent("click",f1);
6.跨浏览器的事件处理程序：
var evnetUtils={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
}
}
}
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
