この記事では、JavaScriptイベントバブルの定義と使用について説明します。次のように、参照のために共有してください。
<！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> <head> <head> <heet-type "content =" text/html; charset = utf-8 "/> <meta name"/> <meta names JavaScript dom </title> <style type = "text/css" media = "screen"> div * {display：block;マージン：4px;パディング：4px;ボーダー：1px固体白。 } textarea {width：20em;高さ：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 solid red'; log.value = 'マウスは次のようになりました：' + this.nodename; }; all [i] .onmouseout = function（e）{this.style.border = '1px solid white'; }; } 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 solid red'; if（e）//イベントバブルE.StopPropagation（）を停止します。 else window.event.cancelbubble = true; log.value = 'マウスが入力しています：' + this.nodename; }; all2 [i] .onmouseout = function（e）{this.style.border = '1px solid white'; }; }} window.onload = init; //]> </script> </head> <body> <h1> javascript domのバブル</h1> <p> domツリーの構造は次のとおりです。 href = "// www.vevb.com/＃"> <span> bubbllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll <p>マウスがULの子要素に入る場合、バブル化を停止しない場合、Mouse Hover（<code> Mouseover </code>）イベントをULからスパンに定義します。このイベントはULに上昇するため、マウスからUL要素に入力された要素から赤い端があります。 </p> <div> <ul> <li> <a href = "// www.vevb.com/＃"> <span> bubbllllllllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com/＃"> <span> </div> <p>バブルが停止した場合、イベントは上昇せず、正確なマウスの入力要素を取得できます。 </p> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。