Niveau
..........
En rapport...

Quoi

Lorsque l'on utilise par exemple un input, on peut mettre des actions en rajoutant “onclic”, ou “onblur” ou autre évènement dans sa déclaration.
ex :

html4strict
<input onblur="alert('sorti!');" name="i" value="" />

Ces évènements ne sont pas obligatoirement créés lors de la description de l'objet. Il existe une méthode en javascript qui permet d'attacher des évènements à un objet.
Le W3C recommande addEventListener :

javascript
objet.addEventListener( type, fn, false );
//ou objet est un objet
//type un évènement (sans le 'on' devant. ex 'clic')
//fn le nom de la fonction à appeler, sans les ()

mais comme d'habitude, IE n'en fait qu'à sa tête et ne reconnait que attachEvent :

javascript
objet.attachEvent( type, fn );
//ou objet est un objet
//type un évènement (avec le 'on' devant. ex 'onclic')
//fn le nom de la fonction a appeler, sans les ()

Lorsqu'un évènement attaché avec addEventListener ou attachEvent se déclenche, on peut faire référence à l'objet “this” dans la fonction appelée.
ex:

javascript
document.addEventListener( 'clic', test, false );
function test() {
alert(this.innerHTML);
}
Si addEventListener met dans “this” l'objet qui a déclenché l'évènement, attachEvent lui met la page. Ce qui est fort gênant car on ne peut déterminer d'où provient l'évènement.

Comment faire alors?

John Resig a mis au point une fonction qui permet d'attacher un évènement et de TOUJOURS avoir l'objet qui la déclencher dans le “this”.
On l'utilise comme ceci :

javascript
addEvent( obj, 'clic', test );
//note : obj est un objet

Voici le code :

javascript
function addEvent( obj, type, fn ) {
//John Resig : http://ejohn.org/projects/flexible-javascript-events/
	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] );
	} else
		obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
//John Resig : http://ejohn.org/projects/flexible-javascript-events/
	if ( obj.detachEvent ) {
		obj.detachEvent( 'on'+type, obj[type+fn] );
		obj[type+fn] = null;
	} else
		obj.removeEventListener( type, fn, false );
}
La fonction removeEvent sert à enlever un évènement, sa déclaration est rigoureusement la même que addEvent.
Si vous désirez annuler un evenement (par exemple le submit d'un formulaire) la méthode connue est de faire :

javascript
function cancel() {
   //votre traitement...
   return false;
}
<input type="submit" onclick="return cancel();" value="ok" />

Cette technique ne fonctionne pas si vous avez attachez vos evenements.
Vous devrez utiliser la méthode suivante :

javascript
function cancel() {
   //votre traitement...
  if (arguments[0] && arguments[0].preventDefault)
    arguments[0].preventDefault(); // en DOM
  return false; // pour IE
}

Explication chez le w3c et chez gerd riesselmann


iDo 28/12/2005 13:13