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 がポップアップします。これはイベント委任の単純なケースです。

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

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

推奨読書:

Vue は動的更新 Echarts コンポーネントを実装します

ブートストラップで selectpicker を使用してドロップダウン ボックスを実装します

JS での url、href、src の使用

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