background preloader

Evénements Javascript

Facebook Twitter

Manipuler Code HTML & DOM. JS Evénements du DOM. Les propriétés et méthodes de l'objet Event dépendront du sur lequel porte le gestionnaire. Dans un premier temps, concentrons-nous spécifiquement sur les méthodes et propriétés de l'interface Event du modèle W3C DOM 2 Event, et précisons l'équivalent du modèle Microsoft quand il existe : 5-D-1-A. Exemple 0 : interfaces d'événement(s) supportées (W3C: hasFeature)▲ Écrivons un petit code Javascript afin de déterminer les interfaces d'évènements supportées par le navigateur qui exécute le code.

Nous utiliserons dans ce bout de code la méthode suivante : document.implementation.hasFeature( feature, version) var interface_supportee = document.implementation.hasFeature('Events', '2.0'); Et le bout de code : Avertissements : Comme précisé à cette adresse , la méthode hasFeature (W3C DOM Core) comporte au moins trois limitations importantes : 1) Il est plus fiable de tester la compatibilité avec un type d'événement précis plutôt qu'avec son interface. 5-D-1-B.

Quelques explications : 5) eventPhase : Gestion des événements en JavaScript. Sommaire Introduction Le dynamisme des pages web est, à quelques exceptions près, assuré par l'interaction entre l'utilisateur et l'interface. Il peut s'agir de déplacements de la souris, de clicks, d'appuis sur les touches du clavier, d'actions spécifiques comme la soumission de formulaires… Ces événements sont souvent liés à des éléments de la page.

Il existe plusieurs manières pour affecter une action à un événement : Par l'attribut HTML adéquat (onclick, onmouseover, onmouseout, onkeydown, …). Seule la méthode des event listeners sera étudiée ici. Mécanisme des événements Lorsque survient un événement, un objet Event est créé, qui définit plusieurs informations quant à la nature de l'événement. Sous Internet Explorer, l'objet Event est global, et accessible via window.Event. Propriétés et méthodes de l'objet Event Données communes (liste non-exhaustive) type Le type d'événement (click, mouseover, change, …) bubbles Indique si l'événement bouillonne.Non-implémenté sous Internet Explorer. target. Advanced JavaScript Event Handling. Written by Jon Perry As an example for the basic ideas involved in this article, let us re-consider the bus problem I mentioned in the first piece.

We may have designed our bus program to travel to the next destination when all the passengers are aboard and have paid. But what happens at the last stop on the bus's route? Automatic event handling would immediately take us to the next stop on the list, probably the first stop in the list of stops. But we need greater control over the actual event. This looks simple on the surface - but what if passengers get on at the last stop? Some problems do have solutions without advanced event handling, but if we are able to use advanced event handling, we will find that simple and practical solutions to these sort of problems are readily available. Advanced Event Handling consists of three sections: Cancelling Events Event Bubbling Mouse Capture Cancelling Events stops them from happening.

Cancelling Events If the form is OK, we leave the event alone.