ホームページ > 記事 > ウェブフロントエンド > JSイベントバインディング、イベントリスニング、イベントデリゲーションの間のコンテンツの簡単な分析

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

不言オリジナル: 2018-08-23 15:01:391526ブラウズ

この記事の内容は、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>

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

関連記事