: javascript

Traiter les évènements

Une fonction attachée à un évènement reçoit en paramètre un objet qui hérite de l'interface Event. Cet objet permet d'obtenir des informations supplémentaires sur l'évènement.

function handleClick(event) {
// traitement
}

Une fois encore, les anciens Internet Explorer diffèrent du standard. Si bien que l'objet n'est pas passé en tant que paramètre mais réside dans une variable de l'objet window. Pour récupérer l'objet Event dans tous les cas de figure on peut écrire:

function handleClick(event) {
var event = event || window.event;
}

Cette notation crée une variable locale dont la valeur est event si celui-ci est défini ou window.event dans le cas contraire, ce qui résoud notre problème de manière assez élégante.

L'objet Event (qui en réalité est une interface) est la base pour les différents type d'évènements (souris, clavier, etc.)

Parmi les informations importantes qu'il comporte il y a la propriété target qui permet de savoir quel élément html est le premier concerné par l'évènement. Dans le cas où on attache onclick à un div qui contient une image, target représentera l'image si on clique dessus, et le div si on clique sur le div mais pas sur l'image.

Là aussi il faut traiter le cas d'Internet Explorer qui utilise la propriété srcElement.

function handleClick(event) {
var event = event || window.event;
var target = event.target || event.srcElement;
}

Traiter les évènements souris

Dans le cas d'un mousedown, mousemove etc... on peut obtenir des informations tel que la position de la souris, quel bouton a été cliqué etc... Ceci grâce à l'objet Event qui est de type MouseEvent

function handleMouseMove(event) {
var event = event || window.event;
var x = event.screenX; // position de la souris sur l'écran
}

Traiter les évènements clavier

Les évènements clavier souffrent d'un manque de standard pour le moment. On peut toujours essayer d'obtenir le code de la touche avec:

function handleKey(event) {
var event = event || window.event;
var touche = event.keyCode;
}

Mais aussi event.charCode ou event.which, lire ces articles pour comprendre les problèmes de compatibilité:

http://dev.webnaute.net/DOM/Events/keyboardEvent/ http://www.brainjar.com/dhtml/events/default4.asp

Stopper la propagation (bubbling)

Pour empêcher le traitement de l'évènement par les parents on peut écrire:

function handleClick(event) {
var event = event || window.event;
if (event.stopPropagation) { // Standard
event.stopPropagation();
} else { // Pour IE
event.cancelBubble = true;
}
}

Empêcher le traitement par défaut

function handleClick(event) {
var event = event || window.event;
if (event.preventDefault) { // Standard
event.preventDefault();
} else { // Pour IE
event.returnValue = false;
}
}

Editer