JavaScriptイベントbubble_javascriptスキルの詳しい説明-jsチュートリアル-php.cn

JavaScriptイベントbubble_javascriptスキルの詳しい説明

WBOY

リリース： 2016-05-16 15:20:45

オリジナル

1383 人が閲覧しました

イベントは JavaScript の中心的なコンテンツの 1 つです。イベントの適用にはイベントバブリングという重要な概念が必然的に含まれます。イベントバブリングを紹介する前に、もう 1 つの重要な概念であるイベントフローを紹介します。
1. イベントフローとは: ドキュメントオブジェクトモデル (DOM) はツリー構造であり、次の図で明確に表すことができます。

HTML 要素がイベントをトリガーすると、イベントは DOM ツリー内のトリガーノードとルートノードの間で特定の順序で伝播され、通過するすべてのノードがトリガーされたイベントを受け取ります。一連の出来事。イベントは伝播の順序に従って 2 つのカテゴリに分類でき、1 つはイベントバブリング、もう 1 つはイベントキャプチャであり、この章で紹介するトピックが関係します。

1. イベントバブリング: いわゆるタイムバブリングとは、要素がイベントをトリガーすると、イベントがバブルのようになり、トリガー要素からすべての親ノードに伝播し、対応するルートノードまでイベントが受信されることを意味します。親要素のハンドラー関数にイベントが登録されている場合、子ノードでイベントがトリガーされた場合でも、親要素に登録されているイベントハンドラー関数もトリガーされます。たとえば、上の図では、a 要素の onclick イベントがトリガーされると、その親要素である p、document、および window がすべてこのイベントを受け取り、時間処理関数が対応する親要素に登録されている場合、このイベント処理関数が実行されます。コード例を見てください:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

上記のコードの目的は、対応するセルがクリックされたときに、対応するセルのコンテンツをポップアップすることです。ただし、上記の実装では、onclick イベントハンドラーはセルごとに登録されません。代わりに、onclick イベントハンドラーがセルの親要素テーブルに登録され、セルがクリックされると、onclick イベントがトリガーされます。また、イベントオブジェクトから上に伝播し、テーブル要素にはたまたま onclick イベントハンドラーが登録されています。もちろん、このハンドラーは、イベントオブジェクトのパラメーターを渡す問題がここで設定されます。すべてのブラウザはイベントバブリングをサポートしています。 2. イベントキャプチャ:

イベントキャプチャは、イベントバブリングの逆です。要素がクリックされたとき、IE では、通常、デフォルトで、ルート要素からトリガー要素への伝播がサポートされません。バブルイベント処理モデル。

2.javascriptはイベントのバブリングコードを防止しますイベントのバブリングは特定のシナリオでは非常に便利ですが、場合によっては防止する必要がある場合があります。イベントのバブリングを防止するために、すべての主要なブラウザーと互換性のあるコード例を示します。
コード例:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

ログイン後にコピー

上記のコードにより、イベントのバブリングを防ぐことができます。コードに関する簡単なコメントを次に示します。

2. コードのコメント:

1. 関数 stopBubble(e) {}。この関数はイベントのバブリングを防ぐために使用され、パラメーターはイベントオブジェクトです。
2. if(e&&e.stopPropagation){e.stopPropagation();}、stopPropagation がサポートされているかどうかを判断し、サポートされている場合は e.stopPropagation() を使用します。 stopPropagation() 関数は、IE10 および IE10 より前のブラウザではサポートされていません。
3.window.event.cancelBubble=true、現在の IE ブラウザはこれを使用してイベントのバブリングを防ぎます。