Traitement des événements JavaScript: une compréhension profonde de ce mot-clé et mécanisme de traitement des événements

Les applications Web client efficaces ne peuvent pas être séparées du mécanisme de traitement des événements JavaScript. Les événements permettent à JavaScript de détecter le comportement de l'utilisateur, tels que la souris, en cliquant sur les liens, le défilement de la page, le redimensionnement des fenêtres, la traînée d'objets, etc. Votre code JavaScript peut enregistrer un gestionnaire d'événements qui se déclenche lorsqu'un événement spécifique se produit. La plupart des navigateurs passeront un seul objet contenant des informations sur l'événement à la fonction, tels que les informations clés, la position du curseur de souris, etc. Vous pouvez ensuite effectuer certaines actions telles que les éléments d'animation, le lancement d'une demande AJAX ou bloquer le comportement par défaut du navigateur. En outre, le mot clé ce peut également être défini. En règle générale, ce pointe vers l'élément qui déclenche l'événement, mais ce n'est pas toujours le cas.

Évitez d'utiliser des gestionnaires d'événements en ligne

]

Les gestionnaires d'événements en ligne (par exemple cliquez sur moi ] sont simples, mais ont beaucoup d'inconvénients: ils sont très restrictifs, maladroits et peuvent gonfler le code HTML. Étant donné que les appels d'événements et le gestionnaire sont définis à différents endroits, il est compliqué à maintenir. Enfin, comme les événements peuvent être appelés lorsque la page se charge, les balises de script doivent être placées en haut du HTML, pas en bas.

événement DOM0 traditionnel ]

Méthodes traditionnelles de gestion d'événements (par exemple,

link.onclick = eventHandler; ) ne peut se voir attribuer qu'un seul gestionnaire par type d'événement. Remarque: N'utilisez pas link.onclick = eventHandler (); , cela exécutera immédiatement la fonction eventHandler et attribuera la valeur de retour (undefined) à l'attribut de l'attribut # link . Cela ne rapportera pas d'erreur, mais votre gestionnaire ne sera jamais appelé lorsque l'événement de clic se produira.

Events DOM2 modernes

] Le traitement d'événements moderne permet à plusieurs gestionnaires d'être spécifiés pour le même événement. Cependant, en raison de certaines différences d'implémentation entre Microsoft et W3C, seulement IE9 et ci-dessus prennent en charge

addEventListener ()

. Nous pouvons utiliser la détection d'objets pour créer un événement croisé de navigateur Fonction supplémentaire: jointEvent (lien, "cliquez", eventHandler); fonction fixevent (élément, type, gestionnaire) { if (element.addeventListener) élément.addeventListener (type, mannequin, false); else element.attachevent (type "on", gestionnaire); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

ce

comme l'élément qui déclenche l'événement ... sauf IE8 et ci-dessous. Dans IE8 et ci-dessous, ce est toujours un objet global fenêtre . Heureusement, nous pouvons déterminer l'élément cible de l'objet de l'événement: fonction EventHandler (e) { E = E || window.event; var cible = e.target || e.srcelement; console.log (cible); }

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

Le sens du mot-clé

ce dans javascript event handler ]

Ce mot clé

fait référence au contexte dans lequel la fonction est appelée. Dans un gestionnaire d'événements, ce pointe généralement vers l'élément HTML qui attache le gestionnaire d'événements. Cela vous permet d'accéder directement aux éléments et de manipuler les éléments.

comment utiliser

ce dans le gestionnaire d'événements en utilisant

ce

est simple, tout comme l'utilisation d'autres variables. Rappelez-vous, ce pointe vers l'élément HTML du gestionnaire d'événements attaché.

différents types d'événements dans javascript

javascript prend en charge plusieurs événements tels que

cliquez sur

, MouseOver , souris , keydown , keyup , load et unload .

Comment attacher un gestionnaire d'événements à un élément

Vous pouvez joindre un gestionnaire d'événements à un élément à l'aide de la méthode

addEventListener

. Cette méthode accepte deux paramètres: le nom de l'événement à écouter et la fonction à exécuter lorsque l'événement se produit.

Objet d'événement dans javascript

L'objet de l'événement est un objet spécial créé lorsqu'un événement se produit. Cet objet contient des informations sur les événements, tels que le type d'événement, l'élément cible, l'heure d'occurrence des événements, etc. Vous pouvez accéder aux objets d'événements dans les fonctions de gestionnaire d'événements.