Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

add/removeEventListener werkt niet

Raze - 08/08/2011 11:45

PHP beginner

Hallo,

volgende code:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<style type="text/css">
.test{position:relative;width:100px;height:100px;margin:5px;float:left;border:1px solid #000;}
</style>
<script type="text/javascript">

	
	var listener = function(obj){
		document.body.removeChild(obj);
	}
	
</script>
</head>
<body>
	<a href="#" id="on">Aan</a>
    <a href="#" id="off">Uit</a>
    
    <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>
<script type="text/javascript">
	function addevents(){
		var doc1 = document.getElementsByClassName('test');
		for(i=0;i<doc1.length;i++){
			addEventListener('click',listener(doc1[i]),false);
		}
	}

	function removeevents(){
		var doc2 = document.getElementsByClassName('test');
		for(i=0;i<doc2.length;i++){
			removeEventListener('click',listener(doc2[i]),false);
		}
	}
	

	document.getElementById("on").addEventListener('click',addevents,false);
	document.getElementById("off").addEventListener('click',removeevents,false);

</script>
</body>
</html>

<html>
<head>
<style type="text/css">
.test{position:relative;width:100px;height:100px;margin:5px;float:left;border:1px solid #000;}
</style>
<script type="text/javascript">
 
 
	var listener = function(obj){
		document.body.removeChild(obj);
	}
 
</script>
</head>
<body>
	<a href="#" id="on">Aan</a>
    <a href="#" id="off">Uit</a>
 
    <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>
<script type="text/javascript">
	function addevents(){
		var doc1 = document.getElementsByClassName('test');
		for(i=0;i<doc1.length;i++){
			addEventListener('click',listener(doc1[i]),false);
		}
	}
 
	function removeevents(){
		var doc2 = document.getElementsByClassName('test');
		for(i=0;i<doc2.length;i++){
			removeEventListener('click',listener(doc2[i]),false);
		}
	}
 
 
	document.getElementById("on").addEventListener('click',addevents,false);
	document.getElementById("off").addEventListener('click',removeevents,false);
 
</script>
</body>
</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

ThAlmighty - 08/08/2011 17:13
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.

Thomas - 13/08/2011 12:58 (laatste wijziging 13/08/2011 12:58)
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.

Actiefste leden van de maand

Actieve forumberichten