JavaScript でのイベント委任に関するネイティブ JS および jQuery のサンプル コード共有

以下のエディターは、JavaScript イベント委任の例 (ネイティブ js および jQuery コードを使用) を提供します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

イベント委任の原理は、イベントのバブリングに依存しており、親要素へのイベント委任を通じて一連の操作を実行することで、どの子要素がイベントをトリガーしたかを判断できます。

イベント委任を使用する利点

1. イベントによってトリガーされたオブジェクトに基づいて、対応する操作を 1 つずつ実行する必要がありません。 dom の構造は次のとおりです。

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

li をクリックすると、li の値を出力します。

イベント委任を学習する前に、次のようにすべての li を走査してクリック イベントを追加します。

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener(&#39;click&#39;, function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

イベント委任を学習した後のネイティブ JS コードは次のようになります。

var oUl = document.getElementById('oUl');
oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

jQuery コードは次のとおりです:

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

対照的に、イベント デリゲートは親要素を取得するだけでよく、li を走査する必要がないため、効率が大幅に向上します。

2. イベントを親要素に委譲した後、動的に作成（削除）された子要素はイベントを再バインド（アンバインド）する必要がなく、要素とイベントの同期更新を実現します

過去のjsイベントでは監視の場合、js で動的に作成されたサブ要素にはイベントが存在しないため、イベントを再バインドする必要がありますが、イベントの委任を使用することで、イベントを再バインドしなくてもイベント監視を実装できます。 もちろん、イベントバインディングにはイベントバブリングに依存しているため、バブリングがサポートされていない場合にはイベントバインディングを実装できないというデメリットもありますが、その可能性はまだ低いと思います。たとえば、ページ上の button1 と button2 の機能はクリックすると値をポップアップするのに対し、button3 の機能はクリックするとページの色を変更するという機能もあります。これら 3 つのボタンのイベントが異なる場合、クリックを変更するとイベントが共通の親要素に委譲されるとイベントの誤判定が発生します。 したがって、サブコレクションのイベント関数が同じである場合にイベント委任が発生すると思います。同じでない場合は、自己破滅を避けるためにイベント委任を使用しないでください。

実際の開発では、イベント バインディングを習得すると、コードの標準化と効率が向上します。一般的に、利点は欠点を上回ります。

以上がJavaScript でのイベント委任に関するネイティブ JS および jQuery のサンプル コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。