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

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

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

    
• 点击

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

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

    
• 点击1
    
• 点击2
    
• 点击3
    
• 点击4
    
• 点击5

<script> //使用事件委托的代码 var ul=document.getElementsByTagName(&#39;ul&#39;)[0]; ul.addEventListener(&#39;click&#39;, function(e){ alert(e.target.innerHTML); }, false); //不使用事件委托，循环给li添加click事件 var li=document.getElementsByTagName(&#39;li&#39;) 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 サイトの他の関連記事を参照してください。