この記事では、JavaScriptイベント委任の使用について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
1.ページの任意の部分をクリックして、イベントをトリガーします
Script1.jsファイルを作成します。
次のようにコードをコピーします：（function（）{
eventutility.addevent（document、 "click"、function（evt）{
アラート（ 'hello'）;
}）;
}（））;
ページセクション。
次のようにコードをコピーします：<head>
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<スクリプトsrc = "eventutility.js"> </script>
<スクリプトsrc = "script1.js"> </script>
</body>
</html>
出力結果：ページのいずれかをクリックするとポップアップされます。
ただし、ドキュメント内の要素をクリックしてイベントをトリガーする場合があります。
2。デリゲートを使用してイベントをトリガーします
ページにタグを追加します。
次のようにコードをコピーします：<head>
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<div>
<p> <a href = "＃">私をクリックします</a> </p>
</div>
<スクリプトsrc = "eventutility.js"> </script>
<スクリプトsrc = "script1.js"> </script>
</body>
script1.jsを変更します。
次のようにコードをコピーします：（function（）{
eventutility.addevent（document、 "click"、function（evt）{
//クリックオブジェクトを取得します
var target = eventutility.getTarget（evt）;
//クリックオブジェクトのタグ名を取得します
var tagname = target.tagname;
//タグがaの場合
if（tagname === "a"）{
アラート（ "Click Me"）;
//リンクのデフォルト動作をブロックします
eventutility.preventdefault（evt）;
}
}）;
}（））;
出力の結果：ページ上のタグをクリックした場合にのみ、ボックスがポップアップします。
上記の利点は次のとおりです。ドキュメントにタグ要素が追加されていても、すべてのタグをトリガーする機能があります。これはイベントの試運転です。子供の要素のイベントを登録したいのですが、最初に子要素の親要素でイベントを登録します。このようにして、動的に追加され、子要素と同じタイプの要素は、親要素内に登録されます。
イベントを子要素に登録し、ドキュメント内の子要素と同じタイプの要素を動的に追加する場合、動的に追加されたばかりのこれらの子要素のイベントを登録する必要があります。
さらに、イベント委任は「イベントバブル」をうまく利用しています。 「イベントバブル」によると、子要素をクリックすると、子要素の親要素がクリックイベントをキャプチャし、独自の方法をトリガーします。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。