ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptイベントbubble_javascriptスキルの詳しい説明

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル: 2016-05-16 15:20:451460ブラウズ

イベントは 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 ブラウザはこれを使用してイベントのバブリングを防ぎます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS_javascriptスキルでの乱数生成の使い方と関連機能次の記事：JS_javascriptスキルでの乱数生成の使い方と関連機能

続きを見る

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

関連記事