JSでのイベントデリゲーションの使い方を詳しく解説

今回はJSでのイベントデリゲーションの使い方について詳しく解説していきます。JSでイベントデリゲーションを使う際の注意点について、実際の事例を見てみましょう。

イベント委任 (イベントプロキシとも呼ばれます)、実際、この問題も単純です イベント委任を理解するには、まずイベントバブリングのメカニズムを理解する必要があります。イベントバブリングの例を見てみましょう:

<ul>
    <li>点击</li>
</ul>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li')[0];
    ul.addEventListener('click', function(){
      alert('我是ul,我被点击了');
    }, false);
    li.addEventListener('click', function(){
      alert('我是li,我被点击了');
    }, false);
</script>

このコードでは、liをクリックすると、liのクリックイベントがトリガーされますが、このとき、ulのクリックイベントもトリガーされます。これを理解した後、イベントは子要素 (li) の親要素 (ul) からバブルすることができるため、ul 自体にクリック イベントを追加し、すべての li イベントを結合することができます。おそらくここにいる友人の中には、イベント委任の使用法をまだ理解していない人もいるでしょう。説明するためにイベント委任の例を挙げてみましょう:

<ul>
    <li>点击1</li>
    <li>点击2</li>
    <li>点击3</li>
    <li>点击4</li>
    <li>点击5</li>
</ul>
<script>
    //使用事件委托的代码
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click', function(e){
      alert(e.target.innerHTML);
    }, false);
    //不使用事件委托，循环给li添加click事件
    var li=document.getElementsByTagName('li')
    for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
        alert(this.innerHTML);
      }
    }
</script>

上記のコードはイベントを委任します。ul が指定されている場合、クリック イベントのみが表示されます。対応する li をブラウザで実行すると、li に対応する innerHTML，这个function(e){};中的e这个参数实际上就是当前我们点击li时，系统传给我们的一些事件信息,e.target实际上指的就是当前我们点击的这个li，在这里我们每次弹出的都是当前点击对象的innerHTML がポップアップします。これはイベント委任の単純なケースです。

イベントの委任は、コードを最適化する上で非常に重要です。上記のコードの動作を実現するために、イベントの委任を使用しない場合、ul には 5 li が必要になります。では、for ループを使用して li ごとにクリック イベントを記述する必要があります。このように、dom 操作の影響を受けるパフォーマンスが 10 個、100 個以上の場合はどうなるでしょうか。 li too 複数の for ループ自体が多くのイベントを消費します。イベント委任を使用すると、for ループによるパフォーマンスの消費や多数の DOM 操作によるパフォーマンスの消費を回避できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ファジーボックスでWebUploaderを使用する手順の詳細な説明

Vue.jsでの計算ユースケースの詳細な説明

以上がJSでのイベントデリゲーションの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。