イベントリスナーは影響を受けますか？

Question

イベントリストにはどのような影響がありますか？ Imは大きな数字の話を、ここに例を示します

• .markerがクリックされたときに、すべての子どもたちがJSを経て追加された最初の
• で.markerの唯一X量あります - イベントリスナー
• は、それぞれの子は、それが自分だしそれぞれが自分のイベントリスナーを持っていることを意味するもの

---

<!-- Final HTML of single .marker when it has been clicked --> 
<div class="marker"> 
    <div class="remove"></div> 
    <div class="change"></div> 
    <div class="add"></div> 
    <div class="drag"></div> 
</div> 

---

var count = 20 000; 

for(i = 0; i < count; i++) { 

    var marker = document.createElement('div'); 
    marker.className = 'marker'; 
    someParentElement.appendChild(marker); 

    marker.click(function() { 
     //Create child elements 
     var remove = document.createElement('div'); 
     remove.className = 'remove'; 
     marker.appendChild(remove); 

     var change = document.createElement('div'); 
     change.className = 'change'; 
     marker.appendChild(change); 

     var add = document.createElement('div'); 
     add.className = 'add'; 
     marker.appendChild(add); 

     var drag = document.createElement('div'); 
     drag.className = 'drag'; 
     marker.appendChild(drag); 

     //Children eventlisteners 
     remove.click(function() { 
      //Do it's thing 
     }); 
     change.click(function() { 
      //Do it's thing 
     }); 
     add.click(function() { 
      //Do it's thing 
     }); 
     drag.click(function() { 
      //Do it's thing 
     }); 
    }); 
} 

例えばがプログラム20個の000要素を作成、他のことを気にしないでください。私の質問は次のとおりです。これらのイベントリスナーにすべてのコードを含めても、どのような影響がありますか？トリガされていない限り、イベントリスナーの内部にあるコードの種類や量は関係ありませんか？

Answer 1

単一のイベントハンドラを使用してみてください。 switch、.is()

var count = 100; 
 

 
for (i = 0; i < count; i++) { 
 

 
    var marker = document.createElement('div'); 
 
    marker.className = 'marker'; 
 
    marker.innerHTML = marker.className + " " + i; 
 
    document.body.appendChild(marker); 
 

 
    //Create child elements 
 
    var remove = document.createElement('div'); 
 
    remove.className = 'remove'; 
 
    remove.innerHTML = "remove" + i; 
 
    marker.appendChild(remove); 
 

 
    var change = document.createElement('div'); 
 
    change.className = 'change'; 
 
    change.innerHTML = "change" + i; 
 
    marker.appendChild(change); 
 

 
    var add = document.createElement('div'); 
 
    add.className = 'add'; 
 
    add.innerHTML = "add" + i; 
 
    marker.appendChild(add); 
 

 
    var drag = document.createElement('div'); 
 
    drag.className = 'drag'; 
 
    drag.innerHTML = "drag" + i; 
 
    marker.appendChild(drag); 
 
    //Create child elements 
 
} 
 

 
var check = function(args) { 
 
    alert(args.innerHTML.replace(/[^\d+]/g, "")) 
 
} 
 

 
var obj = { 
 
    remove: check, 
 
    change: check, 
 
    add: check, 
 
    drag: check 
 
} 
 

 
var message = function(name) { 
 
    console.log(name) 
 
} 
 

 
$("body").on("click", ".marker", function(event) { 
 
    var name = event.target.className; 
 
    switch (name) { 
 
    case "remove": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    case "change": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    case "add": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    case "drag": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    default: 
 
     /* do stuff */ 
 
     alert(name); 
 
     break; 
 
    } 
 

 
    // utilizing `.is()` 
 
    if ($(event.target).is(".remove")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if ($(event.target).is(".change")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if ($(event.target).is(".add")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if ($(event.target).is(".drag")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if (!$(event.target).is(".marker")) { 
 
    // utilizing an object 
 
    obj[event.target.className](event.target) 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

Answer 2

は非常に多くのイベントリスナーを管理するために、CPUサイクルの浪費に加え、メモリのような感じを繰り返しているので、多くの事のためのイベントハンドラの作成を参照してください。

代わりに、（理想的である可能な限り近い祖先要素として）親ノードからのクリックイベントに耳を傾けるイベントバブリング/委任を使用してイベントをトリガどの要素を参照し、適切なコードを呼び出すためにpreferrableだろうそれに応じて。

これは1回限りのバインドであり、正しく実行されると動的に追加された要素もキャッチする必要があります。また、あなたはこれを実装するだけのjQueryに限定されるものではないけれども、次の

https://learn.jquery.com/events/event-delegation/ http://api.jquery.com/on/

を含める非常によく説明されているjQueryを使って

例。

希望に役立ちます。