検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JSでのイベントデリゲーションの使い方を詳しく解説

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

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-09 10:11:481606ブラウズ

今回は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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ファジーボックスでWebUploaderを使用する手順の詳細な説明次の記事：ファジーボックスでWebUploaderを使用する手順の詳細な説明
関連記事
続きを見る