JavaScriptイベントのバブリング
著者：Eve Cole
更新時間：2009-06-11 16:22:17
HTML代コード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
<html xmlns=" http://www.w3.org/1999/xhtml " lang="zh" xml:lang="zh">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="開発者" content="Realazy" />
<title>JavaScript DOM のバブル</title>
<style type="text/css" media="screen">
div * {表示:ブロック;マージン:4px;パディング:4px;ボーダー:1px 純白;}
テキストエリア {幅:20em;高さ:2em;}
</スタイル>
<script type="text/javascript">
//<![CDATA[
関数 init(){
var log = document.getElementsByTagName('textarea')[0];
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
for (var i = 0, n = all.length; i < n; ++i){
all[i].onmouseover = function(e){
this.style.border = '1px ソリッドレッド';
log.value = 'ネズミ标现在入的是： ' + this.nodeName;
};
all[i].onmouseout = function(e){
this.style.border = '1px 単色白';
};
}
var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
for (var i = 0, n = all2.length; i < n; ++i){
all2[i].onmouseover = function(e){
this.style.border = '1px ソリッドレッド';
if (e) // イベント冒涜を停止
e.stopPropagation();
それ以外
window.event.cancelBubble = true;
log.value = 'ネズミ标现在入的是： ' + this.nodeName;
};
all2[i].onmouseout = function(e){
this.style.border = '1px 単色白';
};
}
}
window.onload = 初期化;
//]]>
</script>
</head>
<本文>
<h1>JavaScript DOM のバブル</h1>
<p>DOM の構造は：</p>
<プリ><コード>
UL
- 李
-A
- スパン
</code></pre>
<div>
<ul>
<li><a href="#"><span>バブルルルルルルルルル</span></a></li>
<li><a href="#"><span>バブルルルルルルルルル</span></a></li>
</ul>
</div>
<テキストエリア></テキストエリア>
<p> ネズミ标侵入UL のいずれかの子要素，如果不止冒泡，我们到UL 到 SPAN都定了ネズミ标悬停（<code>mouseover</code>）イベント，このイベント会上升了UL，从而从マウスマークから入った要素は、UL 要素群に濃い色の縁を持っています。
<div>
<ul>
<li><a href="#"><span>バブルルルルルルルルル</span></a></li>
<li><a href="#"><span>バブルルルルルルルルル</span></a></li>
</ul>
</div>
<p>もし泡への攻撃をやめれば、イベントが上昇しなければ、私たちは元素に入る精密なネズミの痕跡を摂取することができます。</p>
</body>
</html>
