[DOM] attachEvent et addEventListener versus =fonction(){}

Version imprimable

30/05/2007, 15h23
SpaceFrog

[DOM] attachEvent et addEventListener versus =fonction(){}

ça fait un moment que cela me travaille et voici que l'occasion se présente...

Voici un extrait d'un post

Code:

(window.document.attachEvent) ? window.document.attachEvent("onmousemove", posSouris) : window.addEventListener("mousemove", posSouris, false);

je me posais la question à savoir pourquoi utiliser cette syntaxe plutot que

Code:

function populate(){document.onmousemove=function(event){getMouse(event)}}

testé sous IE et FFX ...
30/05/2007, 15h40
Shinuza

Y'a une fonction sur Quirksmode qui gère tout ça très bien avec une total abstraction de cible :D
30/05/2007, 16h09
SpaceFrog

ça ne répond pas à ma question :(

plus clairemlent pourquoi addEvent machin chose qui necessite de différentier les browser plutot que d'attribuer une fonction qui semble crossbrowser ...
30/05/2007, 16h45
E.Bzz

Ca serait pas tout simplement un pb "historique" ?
window.addEventListener pas compatible, et attachEvent pas référencé sur d'autres sites (donc + récent ?)

Code:

function populate(){document.onmousemove=function(event){getMouse(event)}}

daterait donc d'une époque où les fonctions de gestion d'évènements n'étaient pas aussi complètes dans tous les nav'.

Ce n'est qu'une supposition :mrgreen:

(et désolé pour les interprétations au second degré qui pourraient être faites par les esprits mal intentionnés ;) )
30/05/2007, 16h46
Shinuza

Simplement :

addEventListener et attachEvent sont respectivement les modèles Dom et Msie.
Les deux vont trigger une event representé par on+action.

Tu peux également accèder à cette méthode en la definissant à la main, donc en accrochant une fonction sur une elementHTML.

addEventListener et attachEvent sont en fait des raccourcis.
30/05/2007, 16h50
SpaceFrog

tu parles d'un raccourci si tu es obligé de différentier les navigateur :mouarf3:

Je resterais donc sur ma syntaxe crossbrowser
30/05/2007, 16h58
Shinuza

Citation:

Envoyé par SpaceFrog

tu parles d'un raccourci si tu es obligé de différentier les navigateur :mouarf3:

Je resterais donc sur ma syntaxe crossbrowser

1 - Non, tu ne differencies pas le navigateur, tu différencies un modèle via un object, et il n y'a que IE 5.5 et IE 6 à identifer.
2-Ta syntaxe est crossbrowser, la mienne aussi, une fois la fonction ajoutée dans la page.

Ensuite

Code:

addEvent(monelement,'click',cacher)

On appelle ça un one-liner en programation :aie:
30/05/2007, 17h01
SpaceFrog

click ?
tu as la liste des events qu'on peut listener ?
30/05/2007, 17h15
Shinuza

Citation:

Envoyé par SpaceFrog

click ?
tu as la liste des events qu'on peut listener ?

Tous ceux disponibles sur l'element passé en premier paramètre.
Ensuite la tu omets le on de onclick par exemple, la fonction le rajoute directement.

http://www.quirksmode.org/blog/archi..._winner_1.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
function addEvent( obj, type, fn )
{
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent)
	{
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}
 
function removeEvent( obj, type, fn )
{
	if (obj.removeEventListener)
		obj.removeEventListener( type, fn, false );
	else if (obj.detachEvent)
	{
		obj.detachEvent( "on"+type, obj[type+fn] );
		obj[type+fn] = null;
		obj["e"+type+fn] = null;
	}
}