Introduction détaillée à plusieurs types de gestionnaires d'événements en js

Un événement est une certaine action effectuée par l'utilisateur ou le navigateur lui-même, comme le clic, le chargement et le survol de la souris sont les noms des événements.

Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page.

Les gestionnaires d'événements sont des fonctions qui répondent aux événements. Le nom du gestionnaire d'événements commence par "on". Par exemple, le nom du gestionnaire d'événements correspondant à l'événement click est onclick.

Il existe de nombreuses façons de spécifier des gestionnaires d'événements, tels que : gestionnaire d'événements HTML, gestionnaire d'événements DMO niveau 0, gestionnaire d'événements DOM niveau 2, gestionnaires d'événements IE. , gestionnaires d'événements multi-navigateurs.

(1) gestionnaire d'événements html

C'est-à-dire : écrivez le gestionnaire d'événements dans la balise html correspondante.

par exemple :

<input type="button" value="click me" onclick="alert("hello")" />

Inconvénients : ①Il y a un décalage horaire Lorsque l'utilisateur déclenche l'événement correspondant dès que l'élément html apparaît sur la page, le gestionnaire d'événements peut ne pas être disponible. les conditions d'exécution (par exemple, la fonction appelée n'a pas été analysée) provoqueront une erreur. Par exemple :

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">function message(){alert("hello world");}</script>

Étant donné que la fonction appelée se trouve en dessous du bouton, si vous cliquez sur le bouton avant le chargement de la fonction de message, une erreur se produira.

②Le couplage entre le code html et js est trop élevé Si vous souhaitez changer le gestionnaire d'événements, vous devez changer deux endroits : le code html et le code javascript.

(2) Gestionnaire d'événements DMO niveau 0

eg:
var btn=document.getElementById("myBtn");
  btn.onclick=function(){alert(this.id)};

Remarque : si ce code se trouve après le bouton, il se peut qu'il n'y ait aucune réponse, quelle que soit la façon dont vous cliquez dessus pendant un certain temps, car ici Le gestionnaire d'événements n'a pas été spécifié avant l'exécution de l'extrait.

Le gestionnaire d'événements DMO niveau 0 est considéré comme une méthode de l'élément. En d'autres termes, le gestionnaire d'événements DMO niveau 0 s'exécute dans la portée de l'élément, donc ceci dans le programme fait référence à l'élément actuel. Toutes les propriétés et méthodes de l'élément sont accessibles via cela dans le gestionnaire d'événements.

Les gestionnaires d'événements ajoutés de cette manière seront traités pendant la phase de bouillonnement du flux d'événements.

Vous pouvez également supprimer le gestionnaire d'événements spécifié. Définissez simplement l'attribut du gestionnaire d'événements sur null.

eg:
btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

(3) Gestionnaire d'événements au niveau DOM2

L'événement au niveau DOM2 définit deux méthodes pour spécifier et supprimer des gestionnaires d'événements. Ces deux opérations sont : addEventListener() et removeEventListner(). Tous les nœuds DOM contiennent ces deux méthodes. Ils doivent accepter 3 paramètres : le nom de l'événement à traiter, la fonction de traitement et la valeur booléenne. Si le dernier paramètre booléen est vrai, cela signifie que le gestionnaire est appelé en phase de capture. S'il est faux, cela signifie que le gestionnaire d'événements est appelé en phase de bouillonnement.

Par exemple, pour ajouter un gestionnaire d'événements pour un clic sur un bouton, vous pouvez utiliser le code suivant :

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});这里添加的事件处理程序也是依附于元素的的作用域

L'avantage d'utiliser les gestionnaires d'événements DOM2 est que vous pouvez ajouter plusieurs événements au même gestionnaire d’éléments.

例：var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

Résultat : L'identifiant s'affiche en premier, puis hello world.

Les gestionnaires d'événements ajoutés via addEventListner() ne peuvent être supprimés que via removeEventListner. Les paramètres utilisés pour la suppression sont les mêmes que pour l'ajout d'un gestionnaire d'événements. Autre remarque : les fonctions anonymes ajoutées via addEventListner ne peuvent pas être supprimées.

(4) Gestionnaire d'événements IE.

Les fonctions permettant à IE d'ajouter et de supprimer des gestionnaires d'événements sont : attachEvent() et detachEvent(); ces deux fonctions reçoivent les deux mêmes paramètres : le nom du gestionnaire d'événements et la fonction du gestionnaire d'événements. Étant donné qu'IE ne prend en charge que le bouillonnement d'événements, les gestionnaires d'événements ajoutés via attachEvent seront ajoutés à l'étape de bouillonnement.

例如：var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE Lors de l'utilisation de la méthode attachEvent, la portée du gestionnaire d'événements est la portée globale, elle est donc égale à window. (Il est très important de s'en souvenir lors de l'écriture de code multi-navigateur).

Semblable à addEventListner, la méthode attachEvent() peut également être utilisée pour ajouter plusieurs gestionnaires d'événements à un élément

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

Il convient de noter que les gestionnaires de ces événements sont inversés ; ordre déclenché, c'est-à-dire que bonjour tout le monde apparaît en premier, puis cliqué apparaît.

L'utilisation de detach() est brièvement mentionnée.

(5) Gestionnaire d'événements multi-navigateurs

Afin de gérer les événements de manière multi-navigateurs, deux méthodes principales peuvent être utilisées :

①Utiliser pour isoler la bibliothèque js de navigation qui implémente les différences.

②Écrivez vous-même la méthode de gestion des événements la plus appropriée. La détection des capacités est utilisée ici, c'est-à-dire : l'identification des capacités du navigateur. Pour garantir que le code s'exécute de manière cohérente sous la plupart des navigateurs, concentrez-vous simplement sur la phase de bouillonnement.

Les étapes de code sont les suivantes : La première méthode à créer est addHandler (utilisée pour traiter les problèmes de compatibilité entre navigateurs, aucun code spécifique n'est donné ici. Sa responsabilité est de déterminer s'il faut utiliser le niveau DOM0). méthode ou DOM2 selon la situation. Méthode Level, méthode IE pour ajouter des événements. addHandler reçoit 3 paramètres : l'élément sur lequel opérer, le nom de l'événement et la fonction du gestionnaire d'événements. Cette méthode appartient à un objet nommé EventUtil. Cet objet est utilisé ici pour gérer les différences entre les navigateurs.

La méthode correspondante à addHandler est removeHandler(), qui accepte également les mêmes paramètres. La responsabilité de cet événement est de supprimer le gestionnaire d'événements précédemment ajouté. Quelle que soit la manière dont l'événement est ajouté à l'objet, si d'autres méthodes ne sont pas valides, la méthode DOM niveau 0 sera utilisée par défaut.

使用EventUtil的方法如下：var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如IE中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

上面是我整理给大家的在js中详细介绍几种类型的事件处理程序的方式，希望今后会对大家有帮助。

相关文章：

重点解答动态加载JS脚本，一语道破

javascript中遍历EL表达式List集合中的值

如何在3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0标签中一样可以使用el表达式

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!