jsイベントデリゲーションとは何ですか? JavaScript イベント委任の概要

この記事では、js イベントデリゲーションとは何かについての内容をお届けします。 js イベントデリゲーションの導入には一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。

jsイベントデリゲーションとは何ですか?彼にはどんな良いことがあるのでしょうか？率直に言うと、js イベント委任はバブリングの原理を使用して、要素に追加する必要があるイベントをその親に委任することで、DOM インタラクションを削減し、Web ページの最適化を実現します。

    var oUl = document.getElementById("newsList");    
    //获取ul
    oUl.onclick = function(e){
                //只有点击li时才会触发相应代码执行
                var evt = e || event;                
                var _target = evt.target || evt.srcElement; 
                if(_target.nodeName.toUpperCase() == "LI"){     
                    console.log(_target.innerHTML);         
                }
            }            
            /*nodeName 属性可依据节点的类型返回其名称。
            如果节点是一个元素节点 , nodeName 属性将返回标签名。
            如果节点是一个属性节点， nodeName 属性将返回属性名。
            其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。
             toUpperCase() 转为小写
            */

このように書くと、li を何度もトラバースする必要はなく、ul で DOM を 1 回実行するだけで、目的の効果が得られます。では、バブリングとは何で、なぜバブリングができるのでしょうか?
バブリング イベントとは、ドキュメントがイベントをトリガーしたノードに到達し、レイヤーごとにイベント ソースまでキャプチャされ、その後レイヤーごとにバブルアップすることを意味します。これはイベント バブリングです。このバブリング メカニズムを使用して DOM 操作を削減します。注意すべき点は、onclick がイベントのキャプチャをサポートしていないことです。次のような書き込みメソッドがあります。この書き込みメソッドは DOM レベル 2 イベント処理とも呼ばれます。

イベントリスナーの追加：addEventListener(イベント名、ハンドラー関数、ブール値)
イベントリスナーの削除：removeEventListener(イベント名、ハンドラー関数)

• 注: イベント名には on は含まれません。

  最初の値はイベント名、2 番目は処理関数、3 番目のブール値はデフォルトで false です。これを true に変更すると、イベント ハンドラーがバブリング フェーズで実行されます。キャプチャフェーズ。これら 2 つのイベントは同じですが、これら 2 つの属性は IE ではサポートされていません

  
  

IE のイベント リスナー:attachEvent (イベント名、処理関数)、detachEvent (イベント名、処理関数)
• 注: イベント名 Bring on 。

  
  
  

イベントがバブル化するとき、組織もバブル化するのを防ぐことは、イベントが層ごとに上向きに引き起こされるのを防ぐことです。次の方法により、イベントのバブルアップを防ぐことができます。

return false ;
preventDefault();
window.event.cancelBubble = true;

3. oBox.addEventListener("click",function(){
                   console.log("click");
               },false);

ps: イベント委任が使用されていない場合、ノードを追加するときに DOM イベントを取得できません。イベント委任で解決できます

関連する推奨事項:

jsでのイベント委任

イベント委任メソッドのJavaScript実装の詳細な説明

以上がjsイベントデリゲーションとは何ですか? JavaScript イベント委任の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。