2016-01-31 12 views
6

Jaki wpływ ma eventlisteres? Im mówić o wielkich liczbach, oto przykład:Wpływ Eventlistenerów?

  • Jest tylko x ilość .marker na pierwszy
  • Wszystkie dzieci są dodawane przez JS gdy .marker kliknięciu - EventListener
  • Każde dziecko ma swój własny co oznacza, że ​​każdy z nich ma własne listy zdarzeń:

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

proszę nie przeszkadza innych rzeczy, np stworzenie 20 000 elementów programowo. Moje pytanie brzmi następująco: jaki byłby wpływ posiadania tych wszystkich zdarzeńlistów z całym tym kodem? Czy ma znaczenie, ile kodu znajduje się wewnątrz eventlistenera, o ile nie zostało uruchomione?

+0

Nie jest jasne, co masz na myśli przez "wpływ". Istnieją jednak szkielety JS, które korzystają z jednego detektora zdarzeń typu toplevel. – pvg

+0

Można utworzyć pojedyncze zdarzenie 'kliknij' dla' .marker', użyj 'event.target', aby sprawdzić, który element podrzędny' .marker' jest źródłem zdarzenia, użyj 'if..else', aby przetworzyć to, co ma zostać wykonane w pojedynczym handler – guest271314

+0

@pvg Co mam na myśli, jeśli jest i jaki ma wpływ na wydajność/zasoby? Czy ma znaczenie, ile z nich jest na stronie? Czy może ich być za dużo? Czy kod wewnątrz Eventlistener dodaje wagę do wpływu eventlistener? Wydaje się, że jest mnóstwo pytań, ale moim zdaniem wydaje się, że jest to jedno wielkie pytanie. – Solo

Odpowiedz

2

Spróbuj użyć delegowania zdarzeń, pojedynczego modułu obsługi zdarzeń. Zobacz 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>

+0

To jest idealne. Wyobrażam sobie '('body'). On()'/ten kod będzie również działał, jeśli więcej '.marker'-s zostanie dodanych dynamicznie? – Solo

+0

@Solo _ "ten kod będzie również działał, jeśli więcej .marker-s zostanie dodanych dynamicznie?" _ Tak – guest271314

0

Tworzenie obsługi zdarzeń za tak wiele rzeczy, które są powtarzane jest jak odpad cykli procesora, a także pamięci zarządzać tak wielu słuchaczy zdarzeń.

Zamiast tego lepiej byłoby użyć propagacji/delegowania zdarzeń, aby odsłuchać zdarzenia kliknięcia z węzła nadrzędnego (najlepiej zamknąć element przodka, jak to możliwe) i sprawdzić, który element wywołał zdarzenie i wywołać odpowiedni kod odpowiednio.

To byłoby jednorazowe powiązanie i powinno również przechwytywać dynamicznie dodane elementy, jeśli zostanie wykonane prawidłowo.

Przykłady z jQuery, które są również bardzo dobrze wyjaśnione są następujące

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

Choć nie są ograniczone tylko do jQuery do realizacji tego.

Nadzieję, że pomaga.

Powiązane problemy