login  Naam:   Wachtwoord: 
Registreer je!
 Forum

add/removeEventListener werkt niet

Offline Raze - 08/08/2011 11:45
Avatar van RazePHP beginner Hallo,

volgende code:

  1. <style type="text/css">
  2. .test{position:relative;width:100px;height:100px;margin:5px;float:left;border:1px solid #000;}
  3. <script type="text/javascript">
  4.  
  5.  
  6. var listener = function(obj){
  7. document.body.removeChild(obj);
  8. }
  9.  
  10. </head>
  11. <a href="#" id="on">Aan</a>
  12. <a href="#" id="off">Uit</a>
  13.  
  14. <div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div>
  15. <script type="text/javascript">
  16. function addevents(){
  17. var doc1 = document.getElementsByClassName('test');
  18. for(i=0;i<doc1.length;i++){
  19. addEventListener('click',listener(doc1[i]),false);
  20. }
  21. }
  22.  
  23. function removeevents(){
  24. var doc2 = document.getElementsByClassName('test');
  25. for(i=0;i<doc2.length;i++){
  26. removeEventListener('click',listener(doc2[i]),false);
  27. }
  28. }
  29.  
  30.  
  31. document.getElementById("on").addEventListener('click',addevents,false);
  32. document.getElementById("off").addEventListener('click',removeevents,false);
  33.  
  34. </body>
  35. </html>


werkt niet . Ik heb totaal geen idee hoe het komt. Iemand een oplossing?

Het heeft te maken met het toevoegen en verwijderen van events aan div's (ze verwijderen).

2 antwoorden

Gesponsorde links
Offline ThAlmighty - 08/08/2011 17:13
Avatar van ThAlmighty HTML beginner Je geeft je addEventListeners geen scope mee, dan doet Javascript ze binden aan een tijdelijk object wat niet meer accessible is nadat je functie klaar is met uitvoeren. Dus je moet de eventlistener hangen aan je knop.

Daarnaast heb je nu dit gedaan: addEventListener('click',listener(doc1[i]));

Javascript gaat dan eerst de functie uitvoeren en doet dan het resultaat gebruiken als listener functie. Maar je returned niets in die functie dus dan krijgt die void.

Oplossing, vervang je regel voor: this.addEventListener('click',listener,false);
Dan staat je scope goed en bind die de functie naar behoren. Je hoeft namelijk geen parameters zelf toe te voegen want doet het event al! Probeer maar eens.
Offline Thomas - 13/08/2011 12:58 (laatste wijziging 13/08/2011 12:58)
Avatar van Thomas Moderator Mijn advies: gebruik jQuery, hiermee elimineer je ook meteen (de meeste) crossbrowser verschillen van dit soort functionaliteit.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.179s