qu'est-ce que le modèle d'événement javascript

Il existe trois modèles d'événements dans différents navigateurs : le modèle d'événement original, 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. Le modèle d'événement défini dans DOM2 est actuellement pris en charge par tous les principaux navigateurs à l'exception d'IE.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

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

Le type d'événement : divisé en « événements d'entrée (tels que onclicki) » et « événements sémantiques (tels que onsubmit) »

L'inscription au programme d'événement peut se faire des manières suivantes :

1. Code JS comme valeur de propriété HTML

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

2. Gestionnaire d'événements comme attribut JS

Remarque : chaque élément HTML du document a un objet JS correspondant dans l'arborescence du document, et les propriétés de cet objet JS correspondent à ce code HTML. propriétés de l'élément, qu'il s'agisse d'un code JS de nature HTML ou d'un gestionnaire de temps en tant qu'attribut JS, son propre attribut est une fonction "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;

Les gestionnaires d'événements en tant qu'attributs JS peuvent être explicitement appelés avec les attributs JS

document.myfrom.onsubmit();

Les gestionnaires d'événements peuvent renvoyer false pour empêcher le navigateur d'exécuter l'action par défaut de l'événement, des opérations couramment utilisées telles que onsubmit. 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 formulé. par la spécification w3c. Dans le modèle original, le gestionnaire d'événements est appelé directement lorsqu'un événement se produit, et il n'y a pas d'autre processus de propagation d'événement. Dans le modèle DOM2, les événements ont un processus de propagation spécial, qui 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 intéressé par l'événement, il peut enregistrer sa propre fonction de traitement

(2). phase cible : l'événement atteint l'élément cible et exécute la fonction de traitement d'événement de l'élément cible.

(3) phase de bouillonnement : l'événement monte de l'élément cible jusqu'à ce qu'il atteigne le document, bien que tous les types d'événements passent par la phase de capture. , seuls certains événements passeront par la phase de bouillonnement. Par exemple, l'événement submit ne sera pas Up
Pendant tout le processus de propagation de l'événement, vous pouvez appeler event.stopPropagation() pour arrêter la propagation de l'événement, et appeler PreventDefault() pour. empêche le comportement par défaut du navigateur.

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

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

Trois, le modèle IE

Le modèle IE est également fourni. Un objet événement encapsule les détails de l'événement, mais IE ne transmet pas l'objet dans la fonction de traitement d'événement puisqu'il n'y en aura que. un événement à tout moment, IE l'utilise comme attribut de la fenêtre d'objet globale. Propagation d'événements dans IE Le mode correspond aux deuxième et troisième étapes de DOM2. Il exécute d'abord la fonction de traitement de l'élément cible, puis se propage vers le haut. accéder au document. Dans IE, seuls les événements de souris peuvent être capturés, tandis que dans DOM2, tous les événements peuvent être capturés. Enregistrez et supprimez les événements dans IE. La méthode de traitement des fonctions est également différente de celle de DOM2. via les attachEvent("eventType","handler") et detachEvent("eventType","handler") de l'élément. La différence avec dom2 est eventType Avec le préfixe on

Caractéristiques :

1. capturer. Méthode d'interruption de bulle :

window.ecent.cancelBubble=true;

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 désinscription : detachEvent()

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

Puisque Netscape semble avoir complètement arrêté le développement, je n'entrerai pas dans les détails. : c'est du Capture uniquement sans mousser.

【Apprentissage recommandé :

Tutoriel avancé javascript

】

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!