JavaScript & # x27; Ceci & # x27; et les gestionnaires d'événements

Traitement des événements JavaScript: une compréhension approfondie des mots clés et du mécanisme de traitement des événements this

Les applications Web client efficaces ne peuvent pas être séparées du mécanisme de gestion 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. De plus, le mot-clé

peut également être défini. Normalement, this pointe vers l'élément qui déclenche l'événement, mais pas toujours. this

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

Les gestionnaires d'événements en ligne (par exemple

) sont simples, mais ont de nombreux 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. <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="EventHandler();">click me</a>

Événement DOM0 traditionnel

Bien que les méthodes traditionnelles de gestion des événements (par exemple,

) soient simples et directes, un seul gestionnaire peut être attribué par type d'événement. Remarque: N'utilisez pas link.onclick = EventHandler;, cela exécutera immédiatement la fonction link.onclick = EventHandler(); et affectera la valeur de retour (undefined) à l'attribut EventHandler du nœud https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15blink. Cela ne rapportera pas d'erreur, mais votre gestionnaire ne sera jamais appelé lorsque l'événement de clic se produira. onclick

Événement DOM2 moderne

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, uniquement IE9 et supérieur à la prise en charge

. Nous pouvons utiliser la détection d'objets pour créer un événement croisé de navigateur Fonction supplémentaire: addEventListener()

AttachEvent(link, "click", EventHandler);

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

Similaire à l'événement DOM0, tous les navigateurs définissent

à l'élément qui déclenche l'événement ... sauf IE8 et ci-dessous. Dans IE8 et ci-dessous, this est toujours un objet global this. Heureusement, nous pouvons déterminer l'élément cible de l'objet de l'événement: window

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

La signification du mot-clé dans JavaScript Event Handler this

this Le mot clé fait référence au contexte dans lequel la fonction est appelée. Dans un gestionnaire d'événements, this 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 this dans le gestionnaire d'événements

this L'utilisation this est simple, tout comme l'utilisation d'autres variables. N'oubliez pas que

pointe vers l'élément HTML qui attache le gestionnaire d'événements.

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

click JavaScript prend en charge plusieurs événements tels que mouseover, mouseout, keydown, keyup, load, unload,

,

, et .

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

Le gestionnaire d'événements peut être attaché à un élément à l'aide de la méthode . 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 d'é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, le temps d'occurrence des événements, etc. Vous pouvez accéder aux objets d'événements dans les fonctions de gestionnaire d'événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!