日本語
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; -8" /> <meta name="developer" content="Realazy" /> <title>JavaScript DOM のバブル</title> <style type="text/css" media="screen"> div * {display:ブロック;マージン:4px;パディング:4px; border:1px 単色白;} textarea {width:20em; height:2em;} </style> <script type="text/javascript"> //<![CDATA[ function 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> <body> <h1>JavaScript DOM のバブル</h1> <p>DOM の構造:</p> <pre><code> UL - LI - A - SPAN </code></pre> <div> <ul> <li><a href="#"><span>Bubbllllllllllllllllle</span></a></li> <li><a href ="#"><span>Bubbllllllllllllllllle</span></a></li> </ul> </div> <textarea></textarea> <p>ネズミ标进入UL のいずれか一つの子元素、如果不冒険をやめて、UL から SPAN までの間でマウス マーク停止 (<code>mouseover</code>) イベントを特定しました。このイベントにより UL が上昇し、その結果、マウス マークから入った元素から UL 元素の色が変わりました。 </p> <div> <ul> <li><a href="#"><span>ブルルルルルルルルルル</span></a></li> <li><a href="#"><span >泡llllllllllllllllle</span></a></li> </ul> </div> <p>泡への挑戦をやめれば、イベントが上昇しなければ、精緻なネズミの痕跡を元素に取り込むことができます。</p> < /body> </html>
