Analyse d'instance du modèle d'événement JavaScript

Cet article décrit l'utilisation du modèle d'événement JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:

1. Modèle d'événement

Bouillonnant: les événements sont passés des nœuds de feuilles le long du nœud d'ancêtre vers le nœud racine vers le haut.

Capturation: de l'élément supérieur de l'arbre Dom à l'élément le plus précis, en face de l'événement de bulle

Modèle d'événements standard DOM: la norme DOM prend en charge les deux événements de type bulle et les événements de type capture. On peut dire qu'il s'agit d'une combinaison des deux, tout d'abord, de la transmission de type bubble capture, puis de type bulle.

2. Objet de l'événement

Dans IE Browser, l'événement Object est une propriété de Window. Dans la norme DOM, l'événement doit être transmis à la fonction de traitement des événements comme un paramètre unique.

Obtenez un objet d'événement compatible:

 Fonction (événement) {// Event est une fonction de traitement passée comme paramètre de l'événement standard DOM = événement? Event: Window.Event; }

Dans IE, l'objet de l'événement est contenu dans le srcelement de l'événement, tandis que dans la norme DOM, l'objet est contenu dans la propriété cible

Obtenez l'élément pointé par un objet d'événement compatible:

 var cible = event.srcelement? event.srcelement: event.target;

La prémisse est de s'assurer que l'objet de l'événement a été correctement obtenu

3. Écouteur d'événements

Sous IE, l'écouteur enregistré s'exécute dans l'ordre inverse, c'est-à-dire que l'auditeur enregistré est exécuté en premier.

 element.attachevent ('onclick', observateur); // Enregistrer l'élément de l'écouteur.DETACHEVENT ('onClick', Observer) // Supprimer l'auditeur

Le premier paramètre est le nom de l'événement, et le second est la fonction de traitement de rappel

Sous la norme DOM:

 element.addeventListener ('click', observateur, usecapture) element.removeEventListener ('click', observateur, usecapture)

Le premier paramètre est le nom de l'événement, sans le préfixe de "ON", le deuxième paramètre est la fonction de traitement de rappel, et le troisième paramètre indique si la fonction de rappel est appelée dans l'étape de capture ou dans l'étape de la bulle. La vraie vraie est l'étape de capture

4. Livraison des événements

Annuler la livraison des événements dans le navigateur compatible

 Fonction SomeHandler (Event) {Event = Event || window.event; if (event.stoppropagation) // DOM standard event.stoppropagation (); else event.cancelbubble = true; // IE Standard}

Annuler le traitement par défaut après la livraison de l'événement

 Fonction SomeHandler (Event) {Event = Event || window.event; if (Event.PreventDefault) // DOM Événement standard. PARVEFAULT (); else event.ReturnValue = true; // IE Standard}

J'espère que cet article sera utile à la programmation JavaScript de tous.