Fonction AddEventListener : help :/

**black_soul** · 13/08/2008, 21h13

Bonsoir
Tout d'abord je tiens m'excuser d'avance pour ma question stupide et d'un noobisme absolu.
Je dois passer un examen de javascript dans moins de deux semaines et il y a trois jours mes connaissances en ce langage se limitaient à ce dont une calculatrice casio graph 35 serait capable. Je bloque sur AddEventListener, je ne comprends pas à quoi il sert, déclenche-t-il quelque chose, se déclenche-t-il quand une condition est remplie ? J'ai recherché sur google et j'ai trouvé deux choses :
1) Des topics de forum où des utilisateurs posent des questions bien précises, ça ne m'aide pas
2) Des cours employant des termes très techniques qui m'ont plus embrouillé qu'autre chose
Y aurait-t-il quelqu'un parmi vous d'assez patient pour m'expliquer de manière simple la fonction et l'utilisation d'addeventlistener ?

Dans mon cours son utilisation est illustrée de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.addEventListener('load', ajouterEcouteurs, false);
 
function ajouterEcouteurs() {
	var photos = document.getElementsByTagName('img');
	for (i=0; i < photos.length; i++){
		if(photos[i].className == "vignette"){
			photos[i].title = photos[i].alt;
			photos[i].addEventListener('click', changerPhoto, false);
		}
	}
}
 
function changerPhoto (e){ //e = event, nomme l'evenement du listener
	var alt = e.target.alt;
	var position = alt.indexOf("_");
	var radical = e.target.alt.slice(0, position+1);
	var cible = document.getElementById("grandePhoto");
	var grandesPhotos = "../images/geants/photos/" + radical + "400x300.jpg";
	cible.src = grandesPhotos;
}

Le code gère une galerie de photos. Je comprends globalement comment le code fonctionne mais pas la fonction d'addeventlistener.

D'avance merci.

**Matthieu2000** · 14/08/2008, 10h34

fonction à éviter fais une recherche!
http://www.developpez.net/forums/d57...ts-fichier-js/
http://www.developpez.net/forums/d34...rsus-fonction/

**black_soul** · 14/08/2008, 17h55

Heu si tu veux mais c'est pour un examen moi

Donc qu'elle soit bien ou pas terrible ne change rien au fond, il faut que j'apprenne à l'utiliser c'est tout

**D-Ray** · 15/08/2008, 13h05

addEventListener() est une méthode permettant d'attacher une fonction à un événement javascript.
Ce n'est pas vraiment une méthode "à éviter" comme l'a dit Matthieu2000, mais c'est plutôt que la façon dont elle est utilisée dans le code que tu nous as donné est assez originale, du moins je n'avais jamais vu ça avant (pour la première ligne).

Quoi qu'il en soit, addEventListener prend trois paramètres:
- L'événement écouté (ici 'load')
- La fonction à exécuter lors de la réalisation de l'événement
- Et le mode de propagation (true -> descendant, false -> ascendant)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.addEventListener('load', ajouterEcouteurs, false);

Peut être traduit ainsi en HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="ajouterEcouteurs();">

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

photos[i].addEventListener('click', changerPhoto, false);

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="..." onclick="changerPhoto();" />

Fonction AddEventListener : help :/

JavaScript

Discussions similaires

Partager

Partager