JavaScript イベント委任の使用分析_JavaScript スキル

この記事の例では、JavaScript イベント委任の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. ページの任意の部分をクリックしてイベントをトリガーします

script1.js ファイルを作成します。

コードをコピー コードは次のとおりです。

(function() {
EventUtility.addEvent(document, "click", function(evt) {
アラート('こんにちは');
});
}());

ページセクション。

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

<スクリプト src="script1.js">

出力結果: ページ上の任意の場所をクリックすると、ボックスがポップアップ表示されます。

ただし、ドキュメント内の要素をクリックしてイベントをトリガーしたい場合もあります。

2. 委任を使用してイベントをトリガーします

ページにタグを追加します。

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

                                                                                                                                   

<スクリプト src="script1.js">

script1.js を次のように変更します:

コードをコピー コードは次のとおりです。

(function() {

EventUtility.addEvent(document, "click", function(evt) {
//クリックオブジェクトを取得します
var target =eventUtility.getTarget(evt);
//クリックされたオブジェクトのタグ名を取得します
var tagName = target.tagName;
//タグが
の場合 If (タグ名 === "A") {
alert("クリックしてください");
//ブロックリンクのデフォルト動作
eventUtility.preventDefault(evt);
}
});
}());

出力結果：ページ上のaタグをクリックした場合のみボックスがポップアップします。
上記の利点は、ドキュメントに追加された a タグ要素の数に関係なく、すべての a タグをトリガーできることです。このようなアプローチはイベント委任です。子要素にイベントを登録したいのですが、まず子要素の親要素にイベントを登録します。この方法では、親要素内で子要素と同じ型の動的に追加された要素がすべてイベントに登録されます。

サブ要素にイベントを登録し、ドキュメント内のサブ要素と同じタイプの要素を動的に追加する場合、これらの新しく動的に追加されたサブ要素のイベントを登録する必要があります。

さらに、イベントデリゲーションは「イベントバブリング」をうまく利用します。子要素がクリックされると、「イベント バブリング」に従って、子要素の親要素がクリック イベントをキャプチャし、独自のメソッドをトリガーします。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。