Les événements sont une méthode de mise en œuvre de la programmation asynchrone, essentiellement la communication entre diverses composantes du programme, et le DOM prend en charge un grand nombre d'événements;
Cet article utilise ces points pour analyser les principes de base du traitement des événements en détail: type d'événement, cible d'événement, gestionnaire d'événements, objet d'événement, propagation d'événement
Enfin, je vais vous présenter l'objet de l'événement;
1. Type d'événement: une chaîne minuscule complète est-elle utilisée pour indiquer quel type d'événement s'est produit, comme «Mouseover»
Types d'événements traditionnels: formes d'événements, événements de fenêtre, événements de souris, événements de clavier, événements DOM, événements HTML5, écran tactile et événements d'appareils mobiles, etc.
2. Événement cible: l'objet qui déclenche l'événement
3. Écouteur d'événements: une fonction qui gère ou répond aux événements. Lorsqu'un objet déclenche un événement, le navigateur appellera automatiquement la fonction enregistrée sur l'objet;
Enregistrez le gestionnaire d'événements (écoutez les événements):
1. Inscrivez-vous en tant qu'attributs HTML (il ne sera déclenché que dans la phase bouillonnante) tels que <table id = "t" onClick = "modifyText ();">; et certains types d'événements sont généralement déclenchés directement sur le navigateur plutôt que sur un élément de document spécifique. Ces gestionnaires d'événements sont placés sur la balise <body>, mais le navigateur les enregistrera sur l'objet Window, tel que <Body Onload = "Alert ('Hello World!')">, Et ces événements incluent:
onafterprint onfocus ononline onresize onbeforeprint onhashchange
onPageHide onstorage onbeforeunload onload onpageshow onundo
onblur onMessage onPopstate onunload oneError onoffline onredo
La valeur de l'événement en tant qu'attribut HTML est une chaîne de code JS, qui est le corps de la fonction de traitement et ne contient pas {}. Remarque: Essayez de ne pas enregistrer d'événements sur d'autres balises HTML, cela viole le principe de séparation du code HTML et JavaScript. Si la fonction de l'événement peut cliquer sur l'élément d'objet de l'événement avant son chargement, cela entraînera une erreur;
2. Inscrivez-vous en tant qu'attribut de l'élément DOM (il ne sera déclenché qu'au stade de la bulle). À l'heure actuelle, le nom de l'attribut de gestionnaire d'événements doit être préfixé avec «On». Cette méthode est compatible avec tous les navigateurs. Le seul inconvénient est qu'il ne peut enregistrer qu'une fonction de gestionnaire d'événements. Si l'attribut onClick est défini deux fois, cette dernière définition écrasera la précédente; par exemple: window.onload = function () {...};
3. Dans tous les navigateurs à l'exception des versions IE8 et précédentes, les opérations d'événements (écoute et déclenchement) de DOM sont définies dans l'interface EventTarget. Cette interface est déployée pour le nœud d'élément, le nœud de document et l'objet Window. De plus, les objets intégrés du navigateur tels que XMLHTTPRequest, Audionode, AudioconText, etc. ont également déployé cette interface. Il existe trois méthodes de cette interface, AddeventListener et DeVoveEventListener sont utilisés pour lier et supprimer les fonctions de l'écoute, et DispatchEvent est utilisé pour déclencher des événements;
La méthode AddeveventListener (type, écouteur, booléen) est utilisée pour enregistrer l'auditeur. Le troisième paramètre définit la méthode de propagation des événements. Habituellement, la valeur par défaut false est utilisée, ce qui signifie que la fonction d'écoute n'est déclenchée qu'au stade de la bulle (pupple). Lorsqu'il est réglé sur true, cela signifie que la fonction d'écoute est déclenchée dans l'étape de capture (capture); Tous les auditeurs multiples peuvent être enregistrés pour le même événement de type sur le même objet, et tous les auditeurs seront déclenchés dans l'ordre d'enregistrement (l'enregistrement des auditeurs en double sera ignoré par le navigateur);
Si vous souhaitez transmettre des paramètres à la fonction d'écoute, vous pouvez envelopper la fonction d'écoute avec des fonctions anonymes, telles que Elm.AdDeventListener ('click', function () {écouter ('vrai argument')}, false);
Lorsque l'auditeur enregistré est une variable de référence à la fonction, vous pouvez utiliser RemoveEventLestener (type, écouteur, booléen) pour supprimer l'écouteur sur la cible de l'événement. Les événements de bulle et les événements de capture du même événement d'écoute doivent être supprimés séparément, et les deux n'interfèrent pas les uns avec les autres;
var div = document.getElementById ('div'); var écouteur = fonction (événement) {/ * faire quelque chose ici * /}; div.addeventListener ('click', écouteur, false); div.RemoveEventListener ('click', écouteur, false);La méthode DispatchEvent (événement) déclenche manuellement l'événement spécifié sur le nœud actuel, déclenchant ainsi l'exécution de la fonction d'écoute. Cette méthode renvoie une valeur booléenne. Tant qu'une fonction d'écoute appelle Event.PreventDefault (), il renvoie False. Sinon, c'est vrai. Le paramètre est une instance d'un objet d'événement. Le paramètre ne peut pas être vide et doit être un objet d'événement valide, sinon une erreur sera signalée.
btn.addeventListener ('click', écouteur, false);
var e = nouvel événement ('click');
btn.dispatchEvent (e); // L'événement de clic est immédiatement déclenché sur BTN, et l'auditeur sera appelé immédiatement
L'exemple suivant détermine si l'événement a été annulé en fonction de la valeur de retour de la méthode DispatchEvent.
var annulé =! btn.dispatchEvent (événement);
if (annulé) {Console.log ('Event Annuler'); }
else {console.log ('événement non annulé'); }}
4. IE8 et les versions précédentes ne prennent en charge Piède duEnt (Type, auditeur) et Detachevent (type, écouteur). Leur utilisation et AddeventListener sont différentes: a. Il n'y a que deux paramètres; né Le type de paramètre doit être préfixé avec «ON»; c. Il permet un enregistrement répété du même événement d'écoute et sera appelé; d. Il y a un inconvénient à l'utilisation de la méthode attachée, c'est-à-dire que la valeur de cela deviendra un objet de fenêtre au lieu de l'élément qui déclenche l'événement;
Problèmes de commande d'appel: 1). Les gestionnaires enregistrés en définissant les propriétés d'objet ou les attributs HTML sont toujours appelés en premier;
2). Les gestionnaires enregistrés auprès d'AdveventListener sont appelés dans leur ordonnance d'enregistrement;
3). Les gestionnaires enregistrés auprès de Piévacte en héritage IE peuvent être appelés dans n'importe quel ordre.
Problème de valeur de retour:
1). La valeur de retour du gestionnaire d'événements est uniquement significative pour le gestionnaire enregistré via des attributs. L'enregistrement de la valeur de retour du gestionnaire d'événements en définissant l'attribut objet ou l'attribut HTML à false consiste à dire au navigateur de ne pas effectuer les opérations par défaut liées à cet événement. Lorsque le navigateur veut passer à une nouvelle page, l'événement OnBeforeunload de l'objet Window est déclenché. Si sa valeur de retour est une chaîne, elle apparaîtra dans la boîte de dialogue de confirmation de requête;
2) .AdDeventListener () ou attachEvent () Enregistrez le gestionnaire d'événements. Pour annuler le fonctionnement par défaut du navigateur, vous devez appeler la méthode empêchéedaLault () ou définir la propriété returnValue de l'objet Event.
Cela indique le problème:
1). La fonction d'écoute spécifiée par la méthode ADDEVENTListener, l'objet interne pointe toujours vers le nœud qui déclenche l'événement;
2). Ceci de la fonction de gestionnaire d'événements enregistré par IE8 et les méthodes précédentes attachmentEvent pointe vers l'objet global;
Tout cet objet écrit dans la voie suivante pointe vers le nœud d'élément.
element.OnClick = print;
element.addeventListener ('click', imprimer, false)
element.onclick = function () {console.log (this.id);}
<élément onclick = "console.log (this.id)">
Cet objet dans la voie suivante pointe vers l'objet global.
element.OnClick = function () {DoSomething ()};
element.setAttribute ('onClick', 'Dosomething ()');
<élément onclick = "DoSomething ()">
element.attachevent ('onclick', dosomething) // ie8
Problème de mémoire: pour le code suivant, une nouvelle fonction anonyme sera créée dans chaque boucle et la mémoire sera consommée de plus en plus; Puisqu'il n'est pas gardé à la référence à la fonction anonyme, il ne peut pas être appelé dev -EventListener; Par conséquent, le deuxième auditeur de paramètres doit être conservé comme référence à la fonction de l'événement de traitement;
pour (i = 0; i <els.length; i ++) {els [i] .addeventListener ("cliquez", fonction (e) {/ * faire quelque chose * /}, false}); }Fonctions d'outils à usage général compatibles avec IE plus ancienne:
Assurez-vous que cet outil fonctionne AddEvent du gestionnaire d'événements pointe vers l'objet cible de l'événement
fonction addEvent (cible, type, func) {if (target.addeventListener) {target.addeventListener (type, func, false); } else {Target.Attachevent ('on' + type, fonction (e) {// La fonction de traitement enregistrée par jointe de playEvent n'est pas liée à une référence, il est donc impossible d'utiliser Detachevent pour supprimer return func.call (cible, e);}); }}Générant général du gestionnaire d'événements (en raison des versions IE8 et précédentes, le gestionnaire de propriété en tant que cible de l'événement a besoin de Window.Event pour obtenir l'objet de l'événement, et l'objet de nœud cible qui déclenche l'événement est obtenu via la propriété Event.Srcelement)
fonction func (événement) {var event = event || window.event; var cible = event.target || event.srcelement; //......handler Code}4. Propagation des événements: c'est le processus par lequel le navigateur décide quel objet déclenche son gestionnaire d'événements.
Le flux d'événements spécifié dans l'événement "Dom2 Level" comprend trois étapes: stade de capture d'événement ==> dans le stade cible ==> Étape de la bulle d'événement. La première chose qui se produit est la phase de capture de l'événement (se propager de la couche externe à la couche intérieure), ce qui offre une opportunité à tous les nœuds que l'événement passe pour intercepter les événements. Ensuite, il y a l'événement réel de réception cible (exécute dans l'ordre d'enregistrement). La dernière étape est l'étape bouillonnante (bouillonnant de la couche intérieure à la couche externe).
Lorsque des éléments de conteneur et des éléments imbriqués, c'est-à-dire lorsque les gestionnaires d'événements sont appelés dans l'étape de capture et dans l'étape de la bulle: l'événement exécute des gestionnaires d'événements dans l'ordre du flux d'événements DOM, et lorsque l'événement est au stade cible, l'ordre des appels d'événement est déterminé par l'ordre d'écriture de l'événement contraignant
Si vous voulez que l'événement atteigne un certain nœud et ne se propage plus, il y a deux façons:
1. Utilisez la méthode event.stoppropagation () de l'objet d'événement pour empêcher la propagation de la fonction d'écoute actuelle;
2. Utilisez l'événement.StopimMediatEpropagation () Méthode de l'objet d'événement pour empêcher la propagation de toutes les fonctions d'écoute de l'événement actuel sur son objet d'événement;
Délégation des événements: Étant donné que les événements se propageront vers le haut vers le nœud parent à l'étape de la bulle, la fonction d'écoute du nœud enfant peut être définie sur le nœud parent et la fonction d'écoute du nœud parent peut gérer uniformément les événements de plusieurs éléments enfants;
5. Objet de l'événement (événement): Une fois l'événement, un objet d'événement sera généré et passé comme paramètre à la fonction d'écoute. Le navigateur fournit nativement un objet d'événement, et tous les événements sont des instances de cet objet, ou héritent de l'objet Event.Protype. L'objet d'événement lui-même est un constructeur qui peut être utilisé pour générer de nouvelles instances.
var ev = nouvel événement ("look", {"bulles": true, "annule": false});
Document.DispatchEvent (EV);
Le constructeur d'événements accepte deux paramètres. Le premier paramètre est une chaîne, indiquant le nom de l'événement; Le deuxième paramètre est un objet, indiquant la configuration de l'objet événement. Ce paramètre peut avoir les deux propriétés suivantes.
Bubbles: valeur booléenne, facultative, par défaut est fausse, indiquant si l'objet d'événement est bouillonnant.
Annuléable: valeur booléenne, facultative, par défaut est fausse, indiquant si l'événement peut être annulé.
Propriétés de l'objet de l'événement:
1. En relation avec la scène de l'événement:
Bubbles: propriété en lecture seule, renvoie une valeur booléenne, indiquant si l'événement actuel bouillonnera. Différentes fonctions peuvent être appelées selon que l'événement bubblera.
EventPhase: Renvoie une valeur entière (l'un des 0,1,2,3), indiquant l'état actuel de l'événement
<0, l'événement n'a pas encore eu lieu.
<1, l'événement est actuellement en phase de capture, c'est-à-dire qu'il est en train de propagation du nœud d'ancêtre au nœud cible. Le processus provient de l'objet Window au nœud de document, puis au nœud htmlhtmlelement, jusqu'au nœud parent du nœud cible.
<2, l'événement atteint le nœud cible, c'est-à-dire le nœud pointé par l'attribut cible.
<3, l'événement est au stade de la bulle, c'est-à-dire dans le processus de propagation du dos du nœud cible au nœud d'ancêtre. Ce processus provient du nœud parent jusqu'à l'objet Window. Cette étape ne peut se produire que si l'attribut Bubbles est vrai
2. En relation avec le comportement par défaut des événements:
Annuléable: renvoie une valeur booléenne indiquant si l'événement peut être annulé. Si vous souhaitez annuler un événement, vous devez appeler la méthode de préavis pour cet événement
DefaultPreveted: Renvoie une valeur booléenne indiquant si la méthode EmptiserDefault a été appelée.
3. En relation avec le nœud cible de l'événement:
CurrentTarget: renvoie le nœud lié à la fonction d'écoute de l'exécution de l'événement.
Target: renvoie le nœud qui a déclenché l'événement. Dans IE6-IE8, le nom de cette propriété n'est pas une cible, mais un srcelement
4. En relation avec d'autres informations sur l'objet de l'événement:
Type: Renvoie une chaîne représentant le type d'événement
Détail: renvoie une valeur numérique qui représente certaines informations sur l'événement. La signification spécifique est liée au type d'événement. Pour les événements de la souris, cela signifie le nombre de fois où le bouton de la souris est enfoncé à une certaine position. Par exemple, pour les événements DBLClick, la valeur de l'attribut de détail est toujours 2.
Timestamp: renvoie un horodatage en millisecondes, indiquant l'heure à laquelle l'événement s'est produit. Le calcul commence à partir de performancetiming.navigationStart, ce qui signifie le temps nécessaire à l'utilisateur pour accéder à la page Web. Si vous souhaitez convertir cette valeur en un horodatage Unix Epoch, vous devez calculer Event.timestamp + performance.timing.navigationstart
Istruted: Renvoie une valeur booléenne indiquant si l'événement est digne de confiance. Pas très utile, différents supports de navigateurs sont différents.
Méthodes d'objet de l'événement:
PARVEDEFAULT (): annule le comportement par défaut du navigateur pour l'événement actuel. La prémisse pour cette méthode à prendre effet est que la propriété annule de l'événement est vraie. Si faux, appeler cette méthode n'a aucun effet.
stopPropagation (): terminer l'événement pour se propager davantage pendant la capture, le traitement cible ou la bulle du processus de propagation. Après avoir appelé cette méthode, le gestionnaire du nœud qui gère l'événement sera appelé et l'événement ne sera plus envoyé à d'autres nœuds. Remarque: Cette méthode ne peut pas empêcher d'autres manchettes d'événements sur le même nœud de document, mais il peut empêcher les événements d'être expédiés à d'autres nœuds.
stopMmedIatEpropagation (): empêche les autres fonctions d'écoute d'être appelés sur le même événement. Tant que l'une des fonctions d'écoute appelle la méthode, les autres fonctions d'écoute ne seront plus exécutées.
Lien de référence:
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
Guide JavaScript faisant autorité 6e édition
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.