Cet article décrit l'utilisation de l'ajout et de la suppression de l'écoute en JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
L'écoute des événements dans JS consiste à utiliser AddeveventListener pour lier un événement. Cette utilisation est très courante et simple en jQuery, mais elle est plus compliquée dans JS natif. Ici, nous organisons des tests et des exemples de diverses méthodes d'événement AdveventListener pour votre référence et votre apprentissage.
Lorsque je travaillais comme joueur il y a deux jours, j'ai rencontré du mal à supprimer le moniteur et je n'ai pas pu être supprimé. Après l'avoir regardé, j'ai constaté que les paramètres doivent être entièrement correspondants. Que signifie être complètement correspondant? Autrement dit:
La copie de code est la suivante: $ ('. Vidéo') [0] .AdDeventListener ('TimeUpdate', CurrentTimeHandler, true);
Par exemple, trois paramètres doivent être adoptés dans cette phrase afin qu'il puisse être supprimé. Pourquoi est-ce nécessaire? Oui, la partie douloureuse est là:
Lors de l'ajout et de la suppression, le troisième paramètre peut être ignoré, mais leur situation par défaut est différente pour le moment! !
Habituellement, AddeventListener est faux ...
1. Ajouter une écoute d'événement personnalisée
La copie de code est la suivante: var EventHandlesCounter = 1; // Calculez le nombre d'écoute d'événements ajoutés, 0 est utilisé comme bit réservé
fonction addevevent (obj, evt, fn) {
if (! fn .__ EventID) {fn .__ eventID = eventHandlescounter ++;}
if (! Obj .__ EventHandles) {obj .__ EventHandles = []; }
if (! Obj .__ EventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on" + evt] instanceOf function) {
obj .__ EventHandles [evt] [0] = obj ["on" + evt];
obj ["on" + evt] = handleevents;
}
}
Obj .__ EventHandles [EVT] [fn .__ EventID] = fn;
Fonction HandleEvents () {
var fns = obj .__ EventHandles [evt];
pour (var i = 0; i <fns.length; i ++)
fns [i] .Call (this);
}
}
2. Personnalisez l'écoute de l'événement de suppression
La copie de code est la suivante: Fonction Delevent (obj, evt, fn) {
if (! Obj .__ EventHandles ||! Obj .__ EventHandles [evt] ||! fn .__ EventID) {
retourne false;
}
if (obj .__ EventHandles [evt] [fn .__ eventID] == fn) {
supprimer obj .__ EventHandles [evt] [fn .__ EventID];
}
}
3. Corrigez la méthode ci-dessus
La copie de code est la suivante: fonction addevevent (obj, evt, fn, usecapture) {
if (obj.addeventListener) {// préféré utiliser l'enregistrement des événements W3C
obj.addeventListener (evt, fn, !! usecapture);
}autre{
if (! fn .__ EventID) {fn .__ eventID = addevent .__ EventHandlescounter ++;}
if (! Obj .__ EventHandles) {obj .__ EventHandles = [];}
if (! Obj .__ EventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on" + evt]) {
(obj .__ EventHandles [evType] [0] = obj ["on" + evType]) .__ EventID = 0;
}
obj ["on" + evType] = addevent.ExeceventHandles;
}
}
}
addEvent .__ EventHandlesCounter = 1;
addEvent.ExecentHandles = fonction (evt) {
if (! Ce .__ EventHandles) {return true;}
evt = evt || window.event;
var fns = this .__ EventHandles [evt.type];
pour (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceOf function) {
fns [i] .Call (this);
}
}
};
fonction Delevent (obj, evt, fn, usecapture) {
if (obj.reMoveEventListener) {// Supprimer le gestionnaire d'événements d'abord en utilisant la méthode W3C
obj.RemoveEventListener (evt, fn, !! usecapture);
}autre {
if (obj .__ EventHandles) {
var fns = obj .__ EventHandles [evt];
if (fns) {supprimer fns [fn .__ EventID];}
}
}
4. Standardiser les objets de l'événement
La copie de code est la suivante: fonction FixEvent (EVT) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.PreventDefault = fixeEvent.PreventDefault;
evt.stoppropagation = fixEvent.Stoppropagation;
if (evt.type == "Mouseover") {
evt.RelatedTarget = evt.Fromement;
} else if (evt.type == "Mouseout") {
evt.RelatedTarget = evt.ToElement;
}
evt.charcode = (evt.type == "keypress")? evt.KeyCode: 0;
evt.EventPhase = 2;
evt.timestamp = (new Date ()). getTime ();
}
retour EVT;
}
FixEvent.PreventDefault = function () {this.returnvalue = false;}
FixEvent.StopPropagation = function () {this.cancelbubble = true;};
La fonction FixEvent n'est pas exécutée séparément, elle doit avoir un paramètre d'objet d'événement et il n'est exécuté que lorsque l'événement se produit! La meilleure façon est de l'intégrer dans les HEECEVENTHANDLES de la fonction Addevent.
Copiez le code comme suit: addEvent.ExeCentHandles = fonction (evt) {// transize toutes les fonctions de traitement des événements et exécuter
if (! Ce .__ EventHandles) {return true;}
evt = fixEvent (evt || window.event); // le standardiser ici
var fns = this .__ EventHandles [evt.type];
pour (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceOf function) {
fns [i] .Call (this, evt); // et utilisez-le comme premier paramètre de la fonction du gestionnaire d'événements
// De cette façon, vous pouvez utiliser une méthode unifiée pour accéder à l'objet d'événement dans la fonction du gestionnaire d'événements}}};
Ce qui précède est écrit par un maître, et les éléments suivants sont quelques exemples d'événements de surveillance réels
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd html 4.01 transitional // en">
<html>
<adal>
<Title> test6.html </Title>
<script type = "text / javascript">
fonction test () {
Window.Alert ("Vous avez voté une fois");
document.getElementById ("1"). Detachevent ("onclick", test);
}
</cript>
</ head>
<body>
<input type = "bouton" value = "vote" id = "1" />
<script type = "text / javascript">
document.getElementById ("1"). jOttEvent ("onClick", test);
</cript>
</docy>
</html>
Ici, document.getElementById ("1"). PièdeEvent ("onClick", test); est utilisé pour la liaison des événements dynamiques, et le code de copie est utilisé comme suit:
Document.getElementById ("1"). Detachevent ("onclick", test) annule dynamiquement le temps, afin que cet événement ne puisse être correspondant qu'une seule fois, et aucun effet ne sera produit lors de la cliquetis sur ce bouton la prochaine fois.
Ensuite, une autre démonstration d'un événement clavier qui est surveillé en temps opportun pour déterminer si l'entrée est un nombre. S'il ne s'agit pas d'un nombre, il sera invité dynamiquement, puis rejeter son entrée.
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd html 4.01 transitional // en">
<html>
<adal>
<Title> test7.html </Title>
<script type = "text / javascript">
Test de fonction (événement) {
// chaque fois que l'utilisateur appuie sur une touche, il déterminera s'il s'agit d'un numéro
if (event.KeyCode <48 || event.KeyCode> 57) {
Window.Alert ("vous entrez pas un nombre");
retourne false;
}
}
</cript>
</ head>
<body>
<input type = "text" onKeyPress = "return test (événement);" /> Veuillez saisir un numéro
</docy>
</html>
L'événement ici est un objet d'événement, qui peut renvoyer beaucoup d'informations. Veuillez vous référer aux documents pertinents pour plus de détails.
Supplément: Compatibilité dans la surveillance des événements
1. IE utilise la méthode attachée / détachette pour ajouter et supprimer les écouteurs d'événements; W3C utilise la méthode AddEventListener / DOUVEREventListener.
2. IE utilise une méthode de dénomination Onevent pour ses événements, tandis que W3C est la méthode de dénomination de l'événement.
3. L'auditeur d'événements IE utilise un objet d'événement global, tandis que W3C passe l'objet Event comme paramètre à l'écouteur.
4. Afin d'éviter de déclencher le comportement de l'événement par défaut, l'approche de IE consiste à exiger que les programmeurs définissent la valeur de propriété ReturnValue dans l'objet de l'événement sur FAUX, tandis que l'approche de W3C consiste à exécuter la méthode empêchéedaault.
5. IE ne fournit pas de soutien à la phase de capture des événements.
6. Pour arrêter la livraison de l'événement, l'approche de IE consiste à définir la baisse de l'objet de l'événement sur True, tandis que l'approche de W3C consiste à définir la méthode d'exécution StopPropagation.
7. IE appelle l'écouteur d'événements comme une fonction indépendante, tandis que dans W3C, il est appelé comme méthode d'objet. Cela signifie que dans IE, le mot clé de l'événement écoute indique pas l'objet d'occurrence de l'événement mais un objet global inutile (objet Window).
8. IE a des problèmes de fuite de mémoire dans l'utilisation des auditeurs d'événements. Dans IE Browser, si vous souhaitez créer un écouteur d'événements pour un élément et utiliser cet élément dans l'auditeur, l'espace mémoire occupé par l'auditeur et les nœuds DOM associés ne seront pas publiés avant que l'utilisateur entre une autre page.
J'espère que cet article sera utile à la programmation JavaScript de tous.