Geek Answers Handbook

Effects of event participants?

What effect do eventlisteres have? I am talking about large numbers, here is an example:

  • Only x quantity .marker first
  • All children are added via JS when clicking .marker - eventlistener
  • Each child has its own thing, which means that each of them has their own performers of events.
 <!-- 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 thing }); change.click( function() { //Do it thing }); add.click( function() { //Do it thing }); drag.click( function() { //Do it thing }); }); }

Please ignore other things, for example, creating 20,000 items programmatically. My question is this: what would it be like to have all these eventlisteners with all this code in them? It doesn't matter what or what code is inside the eventlistener, if it wasn’t running

+6
source share
2 answers

Try using event delegation, a 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>
+2
source

Creating event handlers for so many repetitive things seems like a loss of processor cycles, plus memory to control so many event listeners.

Instead, it would be preferable to use event bubbling / delegation to listen for click events from the parent node (since the ancestor element was as close as possible, as perfectly as possible) and see which element caused the event and call the appropriate code.

This will be a one-time binding, and if you do it right, you should also add dynamically added elements.

JQuery examples that are also well explained include the following

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

Although you are not limited only to jQuery to implement this.

Hope this helps.

0
source

More articles:


All Articles