关闭

事件捕获和冒泡

163人阅读 评论(0) 收藏 举报
<html>
<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和detachEvent
var 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
}
}
}

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2951次
    • 积分:138
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:3篇
    • 译文:3篇
    • 评论:0条