Introduction au modèle d'événement JavaScript (tutoriel graphique)

Il existe trois modèles d'événements dans différents navigateurs : le modèle d'événement d'origine, le modèle d'événement DOM2 et le modèle d'événement IE. Le modèle d'événement d'origine est pris en charge par tous les navigateurs et celui défini dans DOM2. Le modèle d'événement est actuellement pris en charge par tous les principaux. navigateurs sauf IE.

1. Modèle d'événement original

Les types d'événements : divisés en "événements d'entrée (tels que onclicki)" et "événements sémantiques (tels que onsubmit)"

Le programme d'événement peut être enregistré des manières suivantes :

1. Code JS en tant que valeur de propriété HTML

<input type="button" value="Press me" onclick="alert(&#39;thanks&#39;);"

2. Gestionnaire d'événement en tant qu'attribut JS

Remarque : Chaque élément HTML du document a un objet JS correspondant dans l'arborescence du document. Les propriétés de cet objet JS correspondent aux propriétés de cet élément HTML, qu'il s'agisse d'un code JS en tant que propriété HTML ou d'un gestionnaire de temps en tant que propriété. Propriété JS. Les attributs eux-mêmes sont tous des fonctions "fonction".

<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>

La première méthode d'affectation :

document.f1.b1.onclick=function(){alert('thanks');};

La deuxième méthode d'affectation :

function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;

Comme le gestionnaire d'événements de l'attribut JS peut être explicitement appelé avec l'attribut JS

document.myfrom.onsubmit();

, le gestionnaire d'événements peut renvoyer false pour empêcher le navigateur d'exécuter l'action par défaut de l'événement, telle que l'opération de. lors de la soumission. L'exception est

le blocage de l'événement d'affichage window.status du survol du lien hypertexte, qui renvoie vrai. Par exemple :

<a href="help.htm" onmouseover="window.status=&#39;help&#39;;return true;">help</a>

2. Modèle d'événement DOM2

. Ce modèle est formulé en référence au modèle de bulle d'IE, qui est une spécification formulée par w3c. Dans le modèle original, le gestionnaire d'événements est directement appelé lorsqu'un événement se produit, et il n'y a pas d'autre processus de propagation d'événement, le modèle DOM2. l'événement a une particularité Le processus de propagation est divisé en trois étapes :

(1) phase de capture : l'événement est propagé depuis le document jusqu'à l'élément cible Au cours de ce processus, si un élément ancêtre est présent. intéressé par l'événement, il peut s'enregistrer La fonction de traitement.

(2) phase cible : L'événement atteint l'élément cible, et la fonction de traitement d'événement de l'élément cible est exécutée

. (3) phase de bouillonnement : l'événement monte de l'élément cible jusqu'à atteindre le document. Bien que tous les types d'événements passent par la phase de capture, seuls certains événements passent par la phase de bouillonnement. Par exemple, l'événement de soumission ne sera pas déclenché. .

Event.stopPropagation() peut être appelé pour arrêter l'événement pendant tout le processus de propagation de l'événement, appelez PreventDefault() pour empêcher le comportement par défaut du navigateur. .Modèle IE

addEventListener("eventType","handler","true!false");
removeEventListner("eventType","handler","true!false");

Le modèle IE fournit également un objet événement pour encapsuler l'événement Informations détaillées, mais IE ne transmet pas l'objet à la fonction de traitement des événements puisqu'il n'y aura qu'un seul événement à la fois. , IE l'utilise comme attribut de la fenêtre d'objet globale. Le mode de propagation des événements dans IE correspond au deuxième événement de DOM2. Dans la troisième étape, la fonction de traitement de l'élément cible est d'abord exécutée, puis propagée vers le haut pour atteindre le. Dans IE, seuls les événements de souris peuvent être capturés, tandis que dans DOM2, tous les événements peuvent être capturés. La méthode d'enregistrement et de suppression des fonctions de traitement des événements dans IE est également différente.

La fonction de gestionnaire d'événements est. enregistré et supprimé via attachEvent("eventType","handler") et detachEvent("eventType","handler") de l'élément. La différence avec dom2 est que eventType a le préfixe on

Caractéristiques :

1. Le processus de propagation ne fait que faire des bulles, pas capturer. Méthode d'interruption de bulle :

2. L'objet Event n'est pas un paramètre de fonction du gestionnaire d'événements, mais une variable globale de la fenêtre. 3. Fonction d'enregistrement d'événement : attachEvent() et detachEvent()

window.ecent.cancelBubble=true;

4. Modèle d'événement Netscape4

Puisque Netscape semble avoir complètement arrêté le développement, donc. Je n'entrerai pas dans les détails. Pour faire simple : il capture uniquement les bulles sans bouillonner.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Compréhension approfondie des fonctions anonymes auto-exécutables en Javascript (tutoriel graphique)

Explication détaillée de javascript Le principe du nouvel opérateur en (tutoriel graphique)

Interprétation détaillée des quatre formes d'existence des fonctions JavaScript (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!