Quelles sont les méthodes de liaison d'événements javascript ?-js tutoriel-php.cn

Quelles sont les méthodes de liaison d'événements javascript ?

青灯夜游

Libérer： 2023-01-07 11:47:40

original

6050 Les gens l'ont consulté

Méthode de liaison : 1. Utilisez l'instruction "object.on event name = function(){code}" pour lier ; 2. Utilisez l'instruction "event source.addEventListener (nom de l'événement, nom de la fonction de traitement d'événement, s'il faut capturer) ; " Liaison de l'instruction ; 3. Utilisez l'attribut "onclick" pour lier l'événement dans la balise HTML.

Quelles sont les méthodes de liaison d'événements javascript ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

1. Utilisez l'attribut d'événement de la source d'événement pour lier le gestionnaire

L'une des façons de séparer HTML et JS consiste à lier le gestionnaire d'événement à l'aide de l'attribut d'événement de la source d'événement. Le format de liaison est le suivant. :

obj.on事件名 = 事件处理函数

Copier après la connexion

obj au format est l'objet source de l'événement. Le programme d'événements liés est généralement l'instruction de définition d'une fonction anonyme ou un nom de fonction.

Exemple de gestionnaire de liaison d'attribut d'événement de la source d'événement :

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

Copier après la connexion

2. Utilisez addEventListener() pour lier le gestionnaire

addEventListener() est une méthode du modèle d'événement standard et est valable pour tous les navigateurs standard. Le format d'utilisation de addEvent Lister() pour lier un gestionnaire d'événements est le suivant :

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

Copier après la connexion

Le paramètre "nom de l'événement" est un nom d'événement sans "on" ; le paramètre "si capturer" est une valeur booléenne et la valeur par défaut. la valeur est fausse. Lorsque faux, la diffusion d'événements est obtenue, et lorsqu'elle est vraie, la capture d'événements est obtenue.

En appelant addEventListener() plusieurs fois, vous pouvez lier plusieurs gestionnaires d'événements au même type d'événement d'un objet source d'événement. Lorsqu'un événement se produit sur un objet, toutes les fonctions de gestion d'événements liées à l'événement seront appelées et exécutées dans l'ordre dans lequel elles ont été liées. De plus, il convient de noter que ceci dans la fonction de gestion des événements liée par addEventListener() pointe vers la source de l'événement.

addEventListener() Exemple de gestionnaire de liaison :

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

Copier après la connexion

3. Utilisez l'attribut d'événement de la balise HTML pour lier le gestionnaire

Il convient de noter que lors de l'utilisation de l'attribut d'événement de la balise HTML pour lier le gestionnaire d'événements, Le code de script dans les propriétés d'événement ne peut pas contenir de déclarations de fonction, mais peut être un appel de fonction ou une série de codes de script séparés par des points-virgules.

Exemple : liez les gestionnaires d'événements à l'aide des attributs d'événement des balises HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;张三&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

Copier après la connexion

Le bouton dans le code ci-dessus est l'objet cible de l'événement click, qui lie deux codes de script via l'attribut d'événement onclick de l'étiquette pour le traitement des événements. Une fois le code ci-dessus exécuté dans le navigateur Chrome, lorsque l'utilisateur clique sur le bouton, une boîte de dialogue d'avertissement apparaît.

【Apprentissage recommandé : Tutoriel avancé javascript】

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!