ホームページ > 記事 > ウェブフロントエンド > jsイベントデリゲーションとは何ですか? JS イベント委任を使用する利点は何ですか?

jsイベントデリゲーションとは何ですか? JS イベント委任を使用する利点は何ですか?

不言オリジナル: 2018-08-29 17:37:255980ブラウズ

jsイベントデリゲーションとは何ですか?イベント委任を使用する利点は何ですか? このような疑問を持っている友人も多いと思いますので、次の記事では、js イベント委任の概念と、js イベント委任を使用する利点について説明します。

1. JSイベントデリゲーションとは何ですか?

動的要素のイベントバインディングを処理するためにイベントバブリングを使用する。専門用語をイベント委任と呼びます。簡単に言うと、イベントを親要素にバインドして、子要素のバブリングイベントを監視し、どの子要素であるかを確認することです。このイベントは、もともと特定の要素に追加されたものですが、イベントを完了するために他の要素に追加することとしてよく知られています。 (イベントとは何ですか? を参照してください: JavaScript 中国語リファレンスマニュアル)

たとえば、次の例: ネイティブ js はイベント委任を実装します

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener(&#39;click&#39;,function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

注: js がイベント委任を実装するには 3 つの手順があります:

最初のステップ: 親要素にイベントをバインドします
要素 ul にバインディングイベントを追加し、addEventListener を介してクリックイベントにバインドを追加します

ステップ 2: 子要素のバブリングイベントをリッスンします
ここでのデフォルトはバブリングです。子要素をクリックすると、バブルが表示されます

ステップ 3: イベントの発生元である子要素を見つけます

匿名コールバック関数のパラメータ e は、イベントオブジェクトを受け取るために使用されます。トリガーされたイベントのターゲットは target

2 を通じて取得されます。 js イベント委任の利点:

イベント委任の利点 1: イベント委任テクノロジにより、各単語要素へのイベントリスナーの追加が回避され、操作の数が削減されます。 DOM ノードにより、ブラウザーの再描画と再配置が減り、コード効率のパフォーマンスが向上します。

例を見てみましょう: li を動的に追加する必要があります。ボタンをクリックして li

<input type="button" id="btn" /><ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li></ul>

を動的に追加します。イベント委任なしで次のようにします:

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }

  
}

このようにして、ボタンをクリックして背景色を変更したときに、新しく追加された li にマウス移動イベントがないことがわかります。

「追加」をクリックした時点で、for ループはすでに実行されているためです。

次に、イベント委任を使用してそれを行います。つまり、HTML は変更されません

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

イベント委任のメリット 2: イベント委任を使用すると、親要素のみが DOM と対話し、その他の操作は JS 仮想メモリ内で完了するため、パフォーマンスが大幅に向上します。

jsイベントデリゲーションとは何ですか? JS イベント委任を使用する利点は何ですか?

関連記事