1. 程式人生 > 其它 >javascript當中冒泡(event bubble)用法

javascript當中冒泡(event bubble)用法

javascript當中冒泡(event bubble)用法

9.冒泡(event bubble)
馬克-to-win:預設情況下,當幾個元素重合,事件從最上層元素開始往下層元素傳播。

例 9.1(bubbleIEFF.html)


<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<script type="text/javascript">
function docClick(event)
{
var event = event || window.event;
alert("IE和FF一樣:外面文件:"+event.type);
}
//document.captureEvents(Event.CLICK);
document.onclick = docClick;

</script>

<div onClick="var event = event || window.event;alert('裡面div:'+event.type);">ie和FF都冒泡從裡往外</div>


馬克-to-win:預設情況下,當幾個元素巢狀重合,事件從最上層元素開始往下層元素傳播。

例 9.2(bubble1currentTargetsrcElementIEFF.html)


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function gotClick(event, who) {
/*
1) 在ie中沒有currentTarget,我們只能用下面的方法:來模擬火狐的效果。
2)馬克-to-win:event.target是最上層的元素,event.currentTarget是最底層的元素
*/
var event = event||window.event;
var eTarget =event.srcElement||event.target;
var eCurrentBottomTarget =event.srcElement||event.currentTarget;
if (window.navigator.userAgent.indexOf("MSIE") >= 1)
{
//var en=eCurrentBottomTarget.nodeName.toLowerCase();
// var whol=who.toLowerCase();
while( eCurrentBottomTarget.nodeName.toLowerCase()!=who.toLowerCase()){
eCurrentBottomTarget=eCurrentBottomTarget.parentNode;
// eCurrentBottomTarget=ep;
//en=eCurrentBottomTarget.nodeName.toLowerCase();
// var zhanwei = "zhanwei";
}
}else{
alert(event.target.id + " is event.target.id "+event.currentTarget.id+" is event.currentTarget.id");
}
alert(who +" and " + eTarget.id+" and "+eCurrentBottomTarget.id);
// var zhanwei = "zhanwei";
}
</script>
</head>
<body id="bodyq" οnclick="gotClick(event,'body');">
<p id="pq" οnclick="gotClick(event,'p');">
<input type="button" id="buttonq" value="單擊我" οnclick="gotClick(event,'input');"/>
</p>
</body>
</html>


更多內容請見原文,文章轉載自:

https://blog.csdn.net/qq_43650923/article/details/102211582