1. Événements à bulles
Il existe deux types de modèles d'événements pour les navigateurs: capturez les événements et les événements de bulles. Étant donné que IE ne prend pas en charge les événements de capture, ce qui suit utilise principalement des événements de bulle comme explication.
(Dubbed Bubble) Le type de bulle se réfère à l'événement le plus spécifique à l'événement le moins spécifique déclenché un par un.
La copie de code est la suivante:
<corps onclick = "add ('body <br>')">
<div onclick = "add ('div <br>')">
<ponclick = "add ('p <br>')"> Cliquez sur moi </p>
</div>
</docy>
<div id = "display">
</div>
<script type = "text / javascript">
fonction add (stext) {
var ulo = document.getElementById ("affichage");
ulo.innerhtml + = stext;
}
</cript>
Les trois fonctions ci-dessus ont ajouté la fonction onClick. Les trois fonctions après l'élément P autonome sont tirées. L'élément P est d'abord exécuté, puis le div est exécuté, et enfin le corps est exécuté.
Voici un rappel de l'événement de capture, et son ordre est exactement l'opposé de l'événement à bulles.
2. Surveillance des événements
Un événement nécessite une fonction pour répondre. Ce type de fonction est généralement appelé gestionnaire d'événements. Dans une autre perspective, ces fonctions écoutent en temps réel si un événement se produit, généralement appelé auditeur d'événements. La fonction d'écoute d'événements est assez différente pour différents navigateurs.
je. Méthode d'écoute générale, comme l'utilisation de la méthode onClick, presque chaque balise prend en charge cette méthode. Et la compatibilité du navigateur est très élevée
Considérant le comportement, séparation des événements.
Généralement, surveiller en utilisant les méthodes suivantes
La copie de code est la suivante:
<body>
<div id = "me"> cliquez sur </div>
<script type = "text / javascript">
var opp = document.getElementById ("me"); // événement trouvé
opp.onclick = function () {// définir la fonction de l'événement
alerte ("J'ai cliqué sur!")
}
</cript>
</docy>
Les deux méthodes introduites ci-dessus sont très pratiques et sont aimées par les développeurs Everbright lors de la gestion et de la gestion de quelques petites fonctions. Mais pour le même événement. Ils ne peuvent ajouter qu'une seule fonction, comme la fonction onClick marquée par p. Les deux méthodes ne peuvent avoir qu'une seule fonction. Par conséquent, IE a sa propre solution, ses collègues, et Dom standard stipule une autre méthode.
ii Méthode de surveillance dans IE
Dans le navigateur du matin, chaque élément a deux méthodes pour gérer l'écoute du temps.
sont attachévent () et detachenevt () respectivement.
Comme vous pouvez le voir à partir de leurs noms de fonction, attachenevt () est une fonction utilisée pour ajouter un traitement d'événements à un élément, tandis que Detachevent () est utilisé pour supprimer la fonction d'écoute sur l'élément. Leur syntaxe est la suivante:
[Object] .Attachevent ("enevt_handler", "fnhandler");
[Object] .Detachevent ("enevt_handler", "fnhandler");
Parmi eux, Enevt_Handler représente ONClick, onLoad, OnMouseover, etc. couramment utilisés, etc.
FnHandler est le nom de la fonction de l'écoute.
Dans la section précédente, vous pouvez utiliser la méthode attachEvent () au lieu d'ajouter la fonction d'écoute. Lorsque vous cliquez dessus, vous pouvez utiliser Detachevent () pour supprimer la fonction d'écoute afin qu'il ne soit pas exécuté après le clic suivant.
La copie de code est la suivante:
<script type = "text / javascript">
fonction fnclick () {
alert ("J'ai cliqué sur!");
op.detachevent ("onclick", "fnclick");
}
var op;
window.onload = function () {
op = document.getElementById ("OOP"); // Trouvez l'objet
op.attachevent ("onclick", "fnclick"); // Ajouter une fonction d'écoute
}
</cript>
<div>
<p id = "oop">
</p>
</div>
iii. Ajouter plusieurs événements d'écoute (IE)
La copie de code est la suivante:
<script linguisse = "javascript">
fonction fnclick1 () {
alert ("J'ai été cliqué par fnclick1");
}
fonction fnclick2 () {
alert ("J'ai été cliqué par fnclick2");
//op.detachevent("OnClick",fnclick1); // Supprimer la fonction de l'écoute 1
}
var op;
window.onload = function () {
op = document.getElementById ("myp"); // Trouvez l'objet
op.Attachevent ("onclick", fnclick1); // Ajouter la fonction de l'écoute 1
op.attachevent ("onclick", fnclick2); // Ajouter la fonction de l'écoute 2
}
</cript>
</ head>
<body>
<div>
<p id = "myp"> cliquez sur moi </p>
</div>
3. Surveillance des événements standard DOM
Avec les deux méthodes de IE, le DOM standard utilise également deux méthodes pour ajouter et supprimer respectivement la fonction de l'écoute. c'est-à-dire addEventListener () et retireEventListener ()
Contrairement à IE, ces deux fonctions acceptent 3 paramètres, à savoir le nom de l'événement, le nom de la fonction à attribuer, et s'il est utilisé pour l'étape de la bulle ou l'étape de capture. Les paramètres de l'étape de capture sont vrais et les paramètres de l'étape de la bulle sont faux. La syntaxe est la suivante:
La copie de code est la suivante:
[Object] .AdDeventListener ("Event_name", fnhandler, bcapture);
[Object] .RemoveEventListener ("Event_name", fnhandler, bcapture);
Les méthodes d'utilisation de ces deux fonctions sont essentiellement similaires à IE, mais vous devez noter que le nom de Event_name est "cliquez", "MouseOver", etc., plutôt que "onclick" et "onMouseover" dans IE.
De plus, le troisième paramètre BCAPTURE est généralement réglé sur False, au stade bouillonnant.
Méthode d'écoute d'événements DOM standard:
La copie de code est la suivante:
<script linguisse = "javascript">
fonction fnclick1 () {
alert ("J'ai été cliqué 1");
OP.RemoveEventListener ("Click", fnclick1, false);
}
fonction fnclick2 () {
alert ("J'ai cliqué sur 2");
}
window.onload = function () {
op = document.getElementById ("myp");
op.addeventListener ("cliquez", fnclick1, false);
op.addeventListener ("cliquez", fnclick2, false);
}
</cript>
<div>
<p id = "myp"> cliquez sur moi </p>
</div>
Vous pouvez tester l'ordre d'exécution spécifique.
Ce qui précède est tout sur cet article, j'espère que vous l'aimez.