JavaScript イベントプロキシとデリゲートインスタンスの分析

JavaScript イベントプロキシとデリゲートインスタンスの分析_JavaScript スキル

WBOY

リリース： 2016-05-16 16:07:31

オリジナル

1185 人が閲覧しました

JavaScript では、リスト内の複数の li 項目を監視する必要がある状況によく遭遇します。次のようなリストがあるとします。

item1

item2

item3

item4

次の関数を実装したい場合: マウスが特定の li をクリックすると、アラートが li の内容を出力します。通常の記述方法は次のとおりです。

リスト項目が少ない場合は、各リストに onclick イベントを直接追加します

リスト項目が多い場合は、onload 時にリスト項目ごとにリスナーを呼び出します
最初の方法は比較的単純で直接的ですが、HTML と JavaScript の分離が考慮されていないため、2 番目の方法のコードは次のとおりです:

コードをコピーしますコードは次のとおりです:

window.onload=function(){

var ulNode=document.getElementById("リスト");

var liNodes=ulNode.childNodes||ulNode.children;

for(var i=0;i
liNodes[i].addEventListener('click',function(e){

alert(e.target.innerHTML);

},false);

}

}

上記からわかるように、li を削除または追加し続けると、function() の操作も変更し続ける必要があり、エラーが発生しやすくなります。そのため、イベントプロキシを使用する前に、イベントプロキシを使用することをお勧めします。イベントプロキシ、まずイベントフェーズを見てみましょう:

イベントステージ:

DOM イベントがトリガーされると、元のオブジェクトで 1 回トリガーされるだけでなく、3 つの異なる段階を経ます。つまり、イベントは最初にドキュメントのルートノードからターゲットオブジェクトにフローし (キャプチャフェーズ)、次にターゲットペアで上向きにトリガーされ (ターゲットフェーズ)、その後ドキュメントのルートノードまでトレースバックします (バブリングフェーズ)。 ) 図に示すように (W3C からの画像):

イベントキャプチャフェーズ (キャプチャフェーズ)

イベントの最初のフェーズはキャプチャフェーズです。イベントはドキュメントのルートノードから開始され、DOM ツリーの構造に従ってイベントのターゲットノードまで流れます。途中でさまざまなレベルの DOM ノードを通過し、時間のターゲットノードに到達するまで各ノードでキャプチャイベントをトリガーします。キャプチャフェーズの主なタスクは、再開の伝播パスです。バブリングフェーズでは、このパスを通じて時間をドキュメントルートノードまで追跡します。

コードをコピーしますコードは次のとおりです:

element.removeEventListener(, , );

上記の関数を使用してノードの監視を設定します。 ; を true に設定すると、イベントのキャプチャフェーズの監視コールバック関数を追加できます。実際のアプリケーションでは、キャプチャフェーズの監視を使用するユースケースはあまりありませんが、キャプチャフェーズでイベントを処理することで、特定の要素でクリックイベントがトリガーされるのを防ぐことができます。

コードをコピーしますコードは次のとおりです:

var form=document.querySeletor('form');
form.addEventListener('click',function(e){
e.stopPropagation();
},true);

If you don’t know much about this usage, it is best to set it to false or undefined to monitor the event during the bubbling phase.

Target Phase

When the event reaches the target node, the event enters the target stage. The event is triggered on the target node and then flows backward until it is propagated to the outermost document node.

For multi-level nested nodes, mouse and pointer events are often positioned on the innermost element. Suppose you set a click listening function on a div element, and the user clicks on the p element inside the div element, then the p element is the target element at this time. Event bubbling allows us to listen to click events on this div or higher-level elements, and trigger the callback function during time propagation.

Bubble Phase

After the event is triggered on the target event, it does not terminate on this element. It will bubble up layer by layer along the DOM tree until it reaches the outermost root node. That is to say, the same event will be triggered once on the parent node of the target node, the parent node of the parent node... until the outermost node.

Most events will bubble, but not all. For details, please see: Specification

From the above we can think that we can use event proxy to monitor each li. The code is as follows:

Copy code The code is as follows:

window.onload=function(){

var ulNode=document.getElementById("list");

ulNode.addEventListener('click',function(e){

If(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*Determine whether the target event is li*/

alert(e.target.innerHTML);

}

},false);

};

The above is the entire content of this article. I hope it will be helpful for everyone to become familiar with the delegation and proxy of JavaScript events.

Please take a moment to share the article with your friends or leave a comment. We will sincerely thank you for your support!