個人中心
退出
javascript當(dāng)中冒泡（event bubble）用法
冒泡（event bubble）
馬克-to-win：缺省情況下，當(dāng)幾個元素重合，事件從最上層元素開始往下層元素傳播。
馬克- to-win：馬克 java社區(qū)：防盜版實名手機尾號： 73203。
例 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：缺省情況下，當(dāng)幾個元素嵌套重合，事件從最上層元素開始往下層元素傳播。
例 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" onclick="gotClick(event,'body');">
<p id="pq" onclick="gotClick(event,'p');">
<input type="button" id="buttonq" value="單擊我" onclick="gotClick(event,'input');"/>
</p>
</body>
</html>
馬克-to-win：缺省情況下，當(dāng)幾個元素嵌套重合時，事件是穿透的。即使頂層元素?zé)o事件處理器，事件也可以順利到達下面一層。比較一下事件的截斷：例12.2。
例 9.2_b:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function gotClick(event, who) {
var event = event||window.event;
var eSource =event.srcElement||event.target;
var eCurrentSource =event.srcElement||event.currentTarget;
if (window.navigator.userAgent.indexOf("MSIE") >= 1)
{
//var en=eCurrentSource.nodeName.toLowerCase();
// var whol=who.toLowerCase();
while( eCurrentSource.nodeName.toLowerCase()!=who.toLowerCase()){
eCurrentSource=eCurrentSource.parentNode;
// eCurrentSource=ep;
//en=eCurrentSource.nodeName.toLowerCase();
// var zhanwei = "zhanwei";
}
}else{
alert(event.target.id + " is event.target.id "+event.currentTarget.id+" is event.currentTarget.id");
}
alert(who + eSource.id+" and "+eCurrentSource.id);
// var zhanwei = "zhanwei";
}
</script>
</head>
<body id="bodyq" onclick="gotClick(event,'body');">
<p id="pq" onclick="gotClick(event,'p');">
<input type="button" id="buttonq" value="單擊我" />
</p>
</body>
</html>
例 9.2_c:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div>這個效果我們好像在哪見過vdav<br>
這就是鼠標(biāo)跟蹤jdfjkdfdvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br></div>
<div id="img" style=" z-index:1; position:absolute; width:0px; height:0px; left:0px;top:0px">abc<img src="1.jpg" />bcd</div>
<script>
var car = document.getElementById("img");
function move(event)
{
var event = event || window.event;
car.style.left = event.clientX ;
car.style.top = event.clientY;
}
document.onmousemove=move;
</script>
分類導(dǎo)航