DOM的事件冒泡
今天写代码的时候遇到一个问题,DOM的事件冒泡。这个 有些时候十分难搞,如果多个父级元素注册了同一个事件,怎么处理.
1.如果是动态创建的还比较简单
1 //IE中注册事件
2 var oDiv=document.getElementById("id");
3 oDiv.onclick=function(){}
4 或者
5 var oDiv=document.getElementById("id");
6 oDiv.attachEvent("onclick",fn);
7 //DOM兼容性浏览器
8 var oDiv=document.getElementById("id");
9 oDiv.addEventListener("onclick",fn,false);
10 //这里的false使用的是冒泡阶段,true使用的捕捉阶段。
11 //在浏览器中取得事件对象是在当前方法下:
12 var oDiv=document.getElementById("id");
13 var oEvent=null;
14 oDiv.onclick=function()
15 {
16 oEvent=window.event;
17 }
18 //阻止事件冒泡
19 IE:oEvent.cancelBubble=true;
20 非IE:oEvent.stopPropagation();
21
22
23 //阻止事件冒泡
24 function StopEventBubble(e)
25 {
26 if (e && e.stopPropagation)
27 e.stopPropagation(); //非IE
28 else
29 e.cancelBubble = true;//IE
3 oDiv.onclick=function(){}
4 或者
5 var oDiv=document.getElementById("id");
6 oDiv.attachEvent("onclick",fn);
7 //DOM兼容性浏览器
8 var oDiv=document.getElementById("id");
9 oDiv.addEventListener("onclick",fn,false);
10 //这里的false使用的是冒泡阶段,true使用的捕捉阶段。
11 //在浏览器中取得事件对象是在当前方法下:
12 var oDiv=document.getElementById("id");
13 var oEvent=null;
14 oDiv.onclick=function()
15 {
16 oEvent=window.event;
17 }
18 //阻止事件冒泡
19 IE:oEvent.cancelBubble=true;
20 非IE:oEvent.stopPropagation();
21
22
23 //阻止事件冒泡
24 function StopEventBubble(e)
25 {
26 if (e && e.stopPropagation)
27 e.stopPropagation(); //非IE
28 else
29 e.cancelBubble = true;//IE
30 }