JSイベントバインディング、イベントリスニング、イベントデリゲーションの間のコンテンツの簡単な分析

この記事の内容は、js イベントのバインディングとイベントの監視とイベントの委任に関する簡単な分析です。必要な方は参考にしていただければ幸いです。

1. イベント バインディング
JavaScript がユーザー操作に応答できるようにするには、まずイベント処理関数を DOM 要素にバインドする必要があります。いわゆるイベント処理機能は、ユーザの操作を処理する機能であり、操作ごとに名称が異なります。
イベントをバインドするには 3 つの一般的に使用される方法があります:
(1) DOM でイベントを直接バインドします
DOM 要素、onkeyup、onkeyup、onkeyup、onkeyup、onkeyup、onkeyup、onkeyup、onkeyup、onkeyup、onkeyup、等

<input type="button" value="click me" onclick="hello()"><script>
function hello(){
    alert("hello world!");
}
</script>

(2) JavaScript コードのバインディング イベント
JavaScript コード (つまり、script タグ内) のバインディング イベントにより、JavaScript コードを HTML タグから分離できるため、ドキュメントの構造が明確になり、管理と開発が容易になります。

<input type="button" value="click me" id="btn"><script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>

(3) イベント リスニングを使用してイベントをバインドする
イベントをバインドする別の方法は、addEventListener() またはattachEvent() を使用してイベント リスニング関数をバインドすることです。
イベント監視
イベント監視に関して、W3C 仕様では、キャプチャ ステージ、ターゲット ステージ、バブリング ステージの 3 つのイベント ステージが定義されています。
W3C 仕様

element.addEventListener(event, function, useCapture)

event: (必須) イベント名。すべての DOM イベントをサポートします。
function: (必須) イベントがトリガーされたときに実行される関数を指定します。
useCapture: (オプション) イベントがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを指定します。本当です、捕獲します。偽り、バブル。デフォルトは false です。

<input type="button" value="click me" id="btn1"><script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}
</script>

IE標準

element.attachEvent(event, function)

event：（必須）イベントタイプ。 「on」を追加する必要があります (例: onclick)。
function: (必須) イベントがトリガーされたときに実行される関数を指定します。

<input type="button" value="click me" id="btn2"><script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}
</script>

イベント監視の利点
1. 複数のイベントをバインドできます。
通常のイベント バインドでは、最後にバインドされたイベントのみが実行されます。イベント リスナーは複数の関数を実行できます。

<input type="button" value="click me" id="btn4"><script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

2. 対応する

<input type="button" value="click me" id="btn5"><script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

カプセル化されたイベントモニタリング

<input type="button" value="click me" id="btn5">//绑定监听事件
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}

イベントキャプチャ: イベントキャプチャは、ドキュメントからイベントをトリガーするノードまでのプロセス、つまりトップダウントリガーを指します。イベントの
イベントバブリング: はイベントのボトムアップトリガーです。バインドされたイベント メソッドの 3 番目のパラメーターは、イベント トリガー シーケンスがイベント キャプチャであるかどうかを制御します。 true、イベントキャプチャ、false、イベントバブリング。デフォルトは false で、イベントがバブルアップすることを意味します。

<p id="parent">
　　<p id="child" class="child"></p>
</p>

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+this.id)
            })

child事件被触发，child
parent事件被触发，parent

結論: まず子供、次に親。イベントは内側から外側に向かって順番にトリガーされます。これをイベント バブリングと呼びます。
ここで、3 番目のパラメーターの値を true に変更します。

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+e.target.id)
            },true)parent事件被触发，parentchild事件被触发，child

結論: 最初に親、次に子。イベントトリガーの順序が外側から内側、つまりイベントキャプチャに変更されます。

イベントのバブリングを防ぎ、デフォルトのイベントを防ぐ:
event.stopPropagation() メソッド: これは、イベントのバブリングを防ぎ、イベントがドキュメントに広がるのを防ぐメソッドですが、デフォルトのイベントは、この方法を使用する場合、接続をクリックすると、接続は引き続き開かれます。
event.preventDefault() メソッド: このメソッドを呼び出すと、接続は開かれませんが、バブリングが発生し、そのバブリングが親要素に渡されます。前のレイヤー
return false : このメソッドは、イベントのバブリングを防ぎ、デフォルトのイベントを防ぎます。このコードを書くと、接続は開かれず、イベントは上の親要素に渡されません。これは、event.stopPropagation() と events.preventDefault() を同時に呼び出すことと同じです

イベントの委任は、バブリングの原理を使用してイベントを追加します。実行効果をトリガーする親要素または祖先要素。

<input type="button" value="click me" id="btn6">
var btn6 = document.getElementById("btn6");
document.onclick = function(event){    
event = event || window.event;    
var target = event.target || event.srcElement;    
if(target == btn6){
        alert(btn5.value);
    }
}

イベント委任の利点 1. JavaScript のパフォーマンスを向上させます。イベント委任により、イベントの処理速度が大幅に向上し、メモリ使用量が削減されます

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>
  var item1 = document.getElementById("item1");
  var item2 = document.getElementById("item2");
  var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target == item1){
        alert("hello item1");
    }else if(target == item2){
        alert("hello item2");
    }else if(target == item3){
        alert("hello item3");
    }
})</script>

2. 要素の変更によってイベント バインディングを変更することなく、DOM 要素を動的に追加します。

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>var list = document.getElementById("list");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target.nodeName == "LI"){
        alert(target.innerHTML);
    }
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>

関連する推奨事項:

jquery の on() バインディング イベントと off() アンバインド イベントについての簡単な説明

JavaScript イベント バインディングの一般的な方法とその利点と欠点の分析についての簡単な説明

以上がJSイベントバインディング、イベントリスニング、イベントデリゲーションの間のコンテンツの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。