Eventlisteners有影响吗？

Question

What impact does eventlisteres have? Im talking about big numbers, here's an example:

• There's only x amount of .marker at first
• All children are added via JS when .marker is clicked - eventlistener
• Each child does it's own thing which means each of them have their own eventlisteners

---

<!-- 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
        });
    });
}

Please don't mind other things, eg creating 20 000 elements programmatically. My question is this: what would be the impact of having all these eventlisteners with all this code in them? Does it even matter what or how much code is inside eventlistener as long as it hasn't been triggered?

Answer 1

Try using event delegation , single event handler. See 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

Creating event handlers for so many things which are repeated feels like a waste of CPU cycles, plus memory to manage so many event listeners.

Instead, it would be preferrable to use event bubbling/delegation to listen to the click events from a parent node (as close an ancestor element as possible would be ideal) and see what element triggered the event and call the appropriate code accordingly.

This would be a one-time bind, and should also catch dynamically added elements if done right.

Examples with jQuery that are also explained quite well include the following

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

Though you are not limited to just jQuery to implement this.

Hope that helps.