Résumé du mécanisme d'écoute des événements JS (capture d'événements)

Pendant le processus de développement frontal, nous rencontrons souvent le problème de l'ajout d'événements aux éléments de la page. Il existe également de nombreuses méthodes JS pour ajouter des événements, notamment directement ajoutés à la structure de la page, et certaines méthodes de surveillance des événements JS. Étant donné que chaque navigateur dispose de mécanismes différents pour la surveillance des événements d'événements, le navigateur LE n'a que des bulles d'événements et aucun mécanisme de surveillance des événements, et le problème de compatibilité de l'écoute des événements est le plus gros problème:

1. Écrivez la méthode de l'événement directement sur la structure de la page

 fonction eventFun () {//console.log(this); } <input type = "bouton" onClick = "eventFun ()" value = "bouton" /> // Cela implique un problème de cette portée. EventFun est également une fonction globale ici. L'objet est [fenêtre d'objet], et cela pointe vers la fenêtre.

Pour résoudre ce problème de portée, vous pouvez utiliser la méthode d'ajouter des variables d'événements à la fonction globale et passer cet objet en tant que paramètre à la fonction à l'intérieur de la structure de la page

 <input type = "Button" onClick = "EventFun2 (this)" value = "Button2" /> fonction EventFun2 (eve) {// L'objet de l'événement est passé en tant que paramètre à la méthode globale eve.name = "alex"; window.name = "Robin"; console.log (this); // [fenêtre d'objet] console.log (eve); // [objet htmlinPulelement] console.log (this.name); // Robin console.log (eve.name); // alexvar self = eve; console.log (this.name); // robin console.log (self.name); // alex alert (window.name); alerte (self.name); }

2. L'utilisation de la méthode d'attribution de la valeur aux attributs d'événements est une méthode de liaison aux événements, mais la limitation de cette méthode est qu'elle ne peut lier qu'une méthode aux événements. Si plusieurs liaisons sont liées, une méthode prévaudra.

HtmlementObject.OnClick = fucntion () {// Utilisez cette méthode pour attribuer la valeur aux attributs d'événements, ce pointeur pointera vers l'objet Window, pas l'objet d'événement, cette méthode est donc une référence

 // js code fun1 (); fun2 (); fun3 (); console.log (this); // window.Object} fonction dosomething () {// js code} htmlementobject.onclick = dosomething; // utilisez cette forme d'attribution de valeur aux attributs d'objet événeme

3. Propagation des événements - bulle et capture

La norme de l'événement DOM définit deux flux d'événements, qui sont considérablement différents et peuvent avoir un impact considérable sur votre application. Ces deux flux d'événements sont la capture et la bulle. Comme de nombreuses technologies Web, Netscape et Microsoft les ont implémentés différemment avant de devenir standard. NetScape a choisi d'implémenter des flux d'événements de capture, tandis que Microsoft a implémenté des flux d'événements à bulles. Heureusement, W3C a décidé d'utiliser les deux méthodes en combinaison, et la plupart des nouveaux navigateurs suivent ces deux méthodes de streaming d'événements.

Par défaut, les événements utilisent des flux d'événements à bulles et aucun flux d'événements de capture n'est utilisé. Cependant, dans Firefox et Safari, vous pouvez explicitement spécifier l'utilisation de flux d'événements de capture en transmettant le paramètre UseCapture lors de l'enregistrement de l'événement et de la définition de ce paramètre sur true.

Flux d'événements à bulles

Lorsqu'un événement est déclenché sur un élément DOM, par exemple, l'utilisateur clique sur la souris sur le nœud de nom du client, l'événement suivra les différents nœuds parents hérités à partir duquel le nœud bubble via toute la hiérarchie du nœud DOM jusqu'à ce qu'il rencontre un nœud qui est connecté au processeur de type d'événement. À l'heure actuelle, l'événement est l'événement OnClick. Le bouillonnement des événements peut être résilié à tout moment pendant le processus de bouillonnement. Dans les navigateurs conformes aux normes W3C, vous pouvez appeler la méthode stopPropagation () sur l'objet Event, et dans Internet Explorer, vous pouvez définir l'attribut CancelBubble de l'objet Event à True. Si l'événement n'est pas arrêté, l'événement bouillonnera dans le DOM jusqu'à ce qu'il atteigne la racine du document.

Capture Event Flux

Le traitement de l'événement commence à la racine du niveau DOM, plutôt que de l'élément cible qui déclenche l'événement, et l'événement est transmis en séquence de tous les éléments d'ancêtre de l'élément cible. Dans ce processus, les événements sont capturés par divers éléments dérivés hérités de la racine du document à l'élément cible de l'événement. Si l'écouteur d'événements définit l'attribut UseCapture à True lorsqu'il est enregistré, ils peuvent être affectés à n'importe quel élément de cette période pour gérer l'événement; Sinon, les événements seront ensuite transmis à l'élément suivant sur le chemin d'élément dérivé jusqu'à l'élément cible. Une fois que l'événement a atteint l'élément cible, il bubblera ensuite à travers le nœud DOM.

Méthode de liaison des événements modernes

Pour la leçon précédente, l'utilisation de la liaison d'événements traditionnelle présente de nombreux inconvénients, tels que l'incapacité d'enregistrer plusieurs gestionnaires d'événements sur le même événement d'un objet. Et les navigateurs et le W3C ne sont pas sans considérer cela, donc dans les navigateurs modernes, ils ont leurs propres méthodes pour lier les événements.

W3C DOM

obj.addeventListener (evtype, fn, useCapture) - W3C fournit une méthode pour ajouter des fonctions de traitement des événements. OBJ est l'objet pour ajouter des événements, evType est le type d'événement, sans sur le préfixe, FN est la fonction du gestionnaire d'événements, si UseCapture est vraie, la fonction du gestionnaire d'événements est exécutée dans l'étape de capture, sinon elle est exécutée dans l'étape de la bulle

Obj.RemoveEventListener (EvType, FN, UseCapture) - W3C fournit une méthode pour supprimer les fonctions de traitement des événements

Méthode Microsoft IE

obj.attachevent (evtype, fn) - La méthode fournie par IE pour ajouter des fonctions de traitement des événements. OBJ est l'objet pour ajouter des événements, evType est le type d'événement, avec sur préfixe, FN est la fonction du gestionnaire d'événements, c'est-à-dire ne prend pas en charge la capture d'événements

obj.detachevent (evtype, fn,) - ie fournit une méthode pour supprimer la fonction de gestion des événements, evType contient sur le préfixe

Un moyen d'intégrer les deux

 fonction addevent (obj, evtype, fn, useCapture) {if (obj.addeventListener) {obj.addeventListener (evtype, fn, usecapture); } else {obj.attachevent ("on" + evType, fn); // ie ne prend pas en charge la capture d'événements} else {obj ["on" + evtype] = fn; // En fait, cette situation n'existera pas}} function delevent (obj, eveentener) {usecapture) {if (obj.remevevener) { obj.reMoveEventListener (evtype, fn, usecapture); } else {obj.detachevent ("on" + evType, fn); } else {obj ["on" + evType] = null; }}

Il y a un problème avec la méthode IE Pièce, c'est-à-dire que lors de l'utilisation de PixEvent, cela pointe vers la fenêtre, pas obj! Bien sûr, il y a une solution pour cela!

Mais il y a un autre problème avec la méthode Piède d'IE. La même fonction peut être enregistrée avec le même objet et le même événement plusieurs fois. Solution: abandonner la méthode d'attachement d'IE! La méthode attachée sous IE ne prend pas en charge la capture, qui n'est pas très différente de l'enregistrement des événements traditionnels (à l'exception de la liaison des multiples gestionnaires d'événements), et la méthode d'attachement d'IE a un problème de fuite de mémoire!

Addevent, version moderne Delevent

 <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <éread> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tlepre> js Event écoute </tapie> <style> TD TD {FONT: 12px; Border-Bottom: 1px solide #efefeff;} </pyle> </adg> <body> <div id = "OUTELE" style = "padding: 10px; border: 1px solide # b2b2b2; fond: #efeFeFef;"> <entrée type = "Button" OnClick = "EventFun ()" id = "Button" Value = "Button" / Button "/> <br / br / brut =" Button "Button" Button "/ bouton" /> * onClick = "EventFun2 (this);" id = "Button2" value = "Button2" /> <br /> <input type = "Button" id = "Button3" value = "Button3" /> <br /> <input type = "Button" id = "Button4" value = "Button4" /> <br /> <table id = "htmlelet" style = "border: 1px solide # b2b2; id = "1111"> <td> 111111111111111111111111111 </td> </tr> <tr id = "22222"> <td> 222222222222222222222222222222 </td> </r> <tr> <tr> id = "3333333333333333333333333333333333 </td> </tr> <tr ID = "44444"> <TD> 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </td> </r> <tr id = "5555555555555555555555555555 </td> </tr> </ table> </ div> <script linguisse =" javaScript "type =" text / javascript "> function eventFun () {// 1. Écrivez directement la méthode JS sur la structure de page Console.log (this); // Cela implique un problème avec cette portée. EventFun est une fonction globale, l'objet est la fenêtre, et cela pointe vers l'alerte de fenêtre (ceci); } fonction EventFun2 (eve) {// passe ici l'objet d'événement en tant que paramètre à la méthode globale eve.name = "alex"; // window.name = "Robin"; console.log (this); // [fenêtre d'objet] console.log (eve); // [objet htmlinPulelement] console.log (this.name); // Robin console.log (eve.name); // alex var self = eve; console.log (this.name); // Robin console.log (self.name); // alex alert (window.name); alerte (self.name); } fonction EventFun3 () {// 1. Écrivez directement la méthode JS sur la structure de page Console.log (this); // Cela implique un problème de cette portée. EventFun est une fonction globale, l'objet est la fenêtre, et cela pointe vers la fenêtre console.log (this.id); alerte (ceci); alerte (ceci); alerte (this.id); // var OneleleoBj = EventUtil. $ ("OUTELE"); // devoieEvent (OUTELEOBJ, "Click", EventFun3); } / * var eventUtil = {}; EventUtil. $ = Function (id) {return document.getElementById (id); } EventUtil.openmes = eventFun3; EventUtil.addeventHandle = function (eventTarget, EventType, EventHandle) {// Définissez l'élément d'objet, type d'événement pour l'écoute d'événements, fonction de l'événement if (eventTarget.Attachevent) {eventTarget.Attachevent ("on" + EventType, eventHandle); } else if (eventTarget.addeventListener) {eventTarget.addeventListener (eventType, eventHandle, false)} else {eventTarget ["sur" + eventType] = null; }}; EventUtil.deleventHandle = function (eventTarget, EventType, EventHandle) {// Définissez l'élément d'objet, type d'événement pour l'écoute d'événements, fonction de l'événement if (eventTarget.Detachevent) {alert ("on" + eventType); alert ("on" + eventHandle); eventTarget.Detachevent ("on" + EventType, EventHandle); } else if (eventTarget.RemoveEventListener) {eventTarget.reMoveEventListener (eventType, eventHandle, false)} else {eventTarget ["on" + EventType] = null; }}; * / var eventUtil = {$: function (id) {return document.getElementById (id); }, mais4fun: function () {console.log (this); this.addeventHandle (); }, eventFun3: function () {console.log (this); alerte (ceci); Delevent (obj, evtype, fn, usecapture); }} / *** Utiliser AddEventListener, attachEvent pour la fonction d'écoute addEvent (obj, evtype, fn, useCapture) {if (obj.addeventListener) {obj.addeventListener (evtype, fn, useCapture); } else if (obj.attachevent) {obj.attachevent ("on" + evType, function () {fn.call (obj);}); } else {obj ["on" + evType] = fn; // En fait, cette situation n'existera pas}} fonction Delevent (obj, evtype, fn, usecapture) {if (obj.removeeventListener) {obj.removeeventListener (evtype, fn, useCapture); } else if (obj.detachevent) {obj.detachevent ("on" + evType, fn); } else {obj ["on" + evType] = null; }} fonction addEvent (obj, evType, fn, useCapture) {if (obj.addeventListener) {// prioritaire est donné au schéma d'enregistrement des événements W3C obj.addeventListener (evtype, fn, !! usecapture); } else {// Lorsque AddEventListener n'est pas pris en charge (IE), puisque IE ne prend pas en charge la capture en même temps, il est préférable d'utiliser la liaison d'événements traditionnelle if (! Fn .__ EventID) {fn .__ EventID = Addeventie .__ EventHandlesCounter ++;} // Attribuez un ID unique à chaque épisode d'événement if (! OBJ .__ // _ L'attribut EventHandles est utilisé pour enregistrer des références à tous les gestionnaires d'événements // classifiés par type d'événement if (! Obj .__ EventHandles [evType]) {// La première fois qu'un événement est enregistré obj .__ EventHandles [evType] = {}; if (obj ["on" + evType]) {// La fonction de gestion des événements a été enregistrée de la manière traditionnelle avant (obj .__ EventHandles [evType] [0] = obj ["on" + evType]) .__ EventID = 0; // Ajouter aux 0 bits réservés et ajouter un ID à la fonction de gestion d'événements d'origine} obj ["on" + evType] = addevent.ExeceventHandles; // Lorsqu'un événement se produit, EXECEVENTHANDLES Traverse la table obj .__ EventHandles [evType] et exécutez la fonction dedans}}}} addevevent .__ true;} evt = evt || window.event; var fns = this .__ EventHandles [evt.type]; for (var i in fns) {fns [i] .call (this); }}; / * function Delevent (obj, evtype, fn, useCapture) {if (obj.removeeventListener) {// Utilisez d'abord la méthode W3C pour supprimer la fonction de gestionnaire d'événements obj.removeEventListener (evtype, fn, !! usecapture); } else {if (obj .__ EventHandles) {var fns = obj .__ EventHandles [evType]; if (fns) {delete fns [fn .__ eventID];}}}}} fonction fixeEvent (evt) {// La fonction fixeEvent n'est pas exécutée séparément. Il doit avoir un paramètre d'objet d'événement, et il ne sera exécuté que lorsque l'événement se produira! La meilleure façon est de l'intégrer dans les HEECEVENTHANDLES de la fonction AddEvent 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; // ie ne fonctionne que dans l'étape de la bulle evt.timestamp = (new Date ()). getTime (); // le définir uniquement sur l'heure actuelle} return evt; } fixevent.preventDefault = function () {this.returnvalue = false; // Cela pointe ici vers un certain objet d'événement, pas fixeVent}; FixEvent.StopPropagation = function () {this.cancelbubble = true; }? Utilisez la méthode d'attribution de valeurs à l'attribut de l'événement d'objet pour réaliser l'écoute d'événements //eventutil.$("button3") :.Onclick= EventFun2; // lors de l'ajout de plusieurs méthodes à l'attribut de l'événement, cet dernier est //eventUtil.$("button3"). = function () {fonction getById (id) {return document.getElementById (id); }; // Écrit par Dean Edwards, 2005 // avec entrée de Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addeventie (élément, type, handler) {if (élément.addeventListener) {élément.adDenventListener (Type, False); } else {// Attribuez à chaque gestionnaire d'événements un gestionnaire d'identification unique if (! // Créer une table de hachage des types d'événements pour l'élément if (! element.events) element.events = {}; // Créer une table de hachage des gestionnaires d'événements pour chaque élément / paire d'événements Var Managers = element.Events [Type]; if (! Handlers) {Handlers = element.Events [type] = {}; // Stockez le gestionnaire d'événements existant (s'il y en a un) if (élément ["on" + type]) {Handlers [0] = élément ["on" + type]; }} // Stockez le gestionnaire d'événements dans les gestionnaires de table de hachage [Handler. $$ GUID] = Handler; // Attribuez un gestionnaire d'événements global pour faire tout l'élément de travail ["sur" + type] = handleEvent; }}; // un compteur utilisé pour créer des ids uniques addEvent.guid = 1; fonction reousEvent (élément, type, gestionnaire) {if (element.reMoveEventListener) {element.reMoveEventListener (Type, Handler, false); } else {// Supprimer le gestionnaire d'événements de la table de hash if (element.events && élément.events [type]) {delete element.events [type] [Handler. $$ GUID]; }}}; Fonction HandleEvent (événement) {var returnValue = true; // Prenez l'objet de l'événement (c'est-à-dire un objet d'événement global) Event = Event || FixEvent (((this.ownerDocument || this.Document || this) .parentWindow || fenêtre) .Event); // obtient une référence à la table de hachage des gestionnaires d'événements var mancheurs = this.events [event.type]; // Exécuter chaque gestionnaire d'événements pour (var i dans les gestionnaires) {this. $$ handleevent = Handlers [i]; if (this. $$ handleevent (event) === false) {returnValue = false; }} return returnValue; }; fonction fixevent (événement) {// Ajouter W3C Standard Event Methods Event.PreventDefault = FixEvent.PreventDefault; event.stoppropagation = fixeEvent.stoppropagation; événement de retour; }; FixEvent.PreventDefault = function () {this.returnvalue = false; }; FixEvent.StopPropagation = function () {this.cancelbubble = true; }; fonction tableadDevent () {}; return {add: addEvent, retire: reposevent, $: getbyid}} (); var OneleleoBj = eventUtil. $ ("Onetele"); //addevent.apply(eventutil, ourseleleobj ,"click ", eventfun3]); //EventUtil.add(outEleObj ,"click" ,ventfun3); var inputoBj = EventUtil. $ ("Button4"); var tablele = eventUtil. $ ("htmlelet"); var tabtrele = tablele.getElementsByTagName ("tr"); EventUtil.add (tablele, "click", eventFun3); pour (i = 0; i <tabtrele.length; i ++) {eventUtil.add (tabtrele [i], "cliquez", eventFun3); } EventUtil.Remove (tablele, "cliquez", eventFun3); // Méthode de délétion de l'événement eventUtil.add (tablele, "cliquez", eventFun3); // eventUtil.add (inputoBj, "click", eventFun3); //EventUtil.remove(ateleoBj ,"click",EventFun3); //Console.log(AdDevent); // addEvent (inputoBj, "click", eventFun3, true); // Delevent (OUTELEOBJ, "Click", EventFun3, false); </cript> </ body> </html>

PS: Ici, nous vous fournissons un outil en ligne sur les événements JS, qui résume les types d'événements couramment utilisés et les fonctions de fonction de JS:

Une liste complète des événements et fonctions JavaScript:

http://tools.vevb.com/table/javascript_event