Comment ajouter des événements aux éléments ? Trois façons d'analyser les événements de liaison JS-js tutoriel-php.cn

Javascript, en tant que langage de script, peut lier des événements aux éléments de la page, de sorte que lorsqu'un événement spécifié se produit, le gestionnaire d'événements correspondant peut être automatiquement appelé pour gérer l'événement. Alors comment ajouter des événements aux éléments ? L'article suivant vous présentera trois façons de lier des événements dans JS. J'espère qu'il vous sera utile !

Comment ajouter des événements aux éléments ? Trois façons d'analyser les événements de liaison JS

Pour que le navigateur appelle automatiquement le gestionnaire d'événements correspondant pour gérer l'événement lorsqu'un événement se produit, il est nécessaire de lier un gestionnaire d'événements à la source de l'événement (le gestionnaire d'événements lié est également appelé gestionnaire d'événements enregistré ).

Il existe 3 façons de lier des gestionnaires d'événements :

Dans les balises HTML, utilisez les attributs d'événement (tels que onclick) pour lier les gestionnaires d'événements. Cette méthode définit la valeur de l'attribut d'événement de la balise sur le gestionnaire d'événements. Cette méthode n'est pas recommandée actuellement. HTML et js sont couplés, ce qui n'est pas propice à la maintenance.
Dans js, utilisez l'attribut d'événement de la source d'événement (comme onclick) pour lier la fonction de gestionnaire d'événements. Cette méthode définit la valeur de l'attribut d'événement de l'objet source d'événement sur la fonction de traitement d'événement.
Dans js, utilisez la méthode addEventListener() pour lier des événements et des fonctions de gestion d'événements (les versions antérieures à IE9 utilisent la méthode attach Event()).

1. Utilisez l'attribut event de la balise HTML pour lier le gestionnaire

Il convient de noter que lors de l'utilisation de l'attribut event de la balise HTML pour lier le gestionnaire d'événement, le code de script dans l'événement l'attribut ne peut pas être inclus. Une déclaration de fonction, mais peut être un appel de fonction ou une séquence de codes de script séparés par des points-virgules.

【Exemple 1】Utilisez l'attribut d'événement de la balise HTML pour lier le gestionnaire d'événements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;PHP中文网&#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 et le résultat est tel qu'indiqué dans la figure ci-dessous.

Comment ajouter des événements aux éléments ? Trois façons danalyser les événements de liaison JS

Lorsque le gestionnaire d'événements implique plus de 2 lignes de code, si vous liez toujours le gestionnaire d'événements comme dans l'exemple 1, la lisibilité du programme deviendra très mauvaise. Vous pouvez le faire en définissant le gestionnaire d'événements en tant que fonction et en appelant la fonction dans les propriétés de l'événement.

【Exemple 2】L'attribut d'événement de la balise HTML est un appel de fonction.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签的事件属性为函数调用</title>
<script>
     function printName(){
          var name = "PHP中文网";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

Copier après la connexion

Le résultat de l'exécution du code ci-dessus est exactement le même que celui de l'exemple 1. Comme vous pouvez le voir dans les deux exemples ci-dessus, l'attribut d'événement de balise mélange le code de script JS et les balises HTML, violant ainsi le principe standard du Web selon lequel JS et HTML doivent être séparés. Par conséquent, il n'est pas recommandé d'utiliser les attributs d'événement des balises HTML pour lier des gestionnaires d'événements et doit être évité dans les applications pratiques.

2. 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 en utilisant l'attribut d'événement de la source d'événement. est la suivante :

obj au format

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

Copier après la connexion

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

【Exemple 3】Utilisez l'attribut d'événement de la source d'événement pour lier la fonction du gestionnaire d'événements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件属性绑定事件处理函数</title>
<script>
     window.onload = function(){//窗口加载事件绑定了一个匿名函数
          //定义一个名为fn的函数
          function fn(){
               alert(&#39;hello&#39;);
          }
          //获取事件源对象
          var oBtn1 = document.getElementById("btn1");
          var oBtn2 = document.getElementById("btn2");
         
          //绑定一个匿名函数
          oBtn1.onclick = function(){
               alert("hi");
          }
          //绑定一个函数名
          oBtn2.onclick = fn;
     };
</script>
</head>
<body>
   <input type="button" id="btn1" value="绑定一个匿名函数">
   <input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>

Copier après la connexion

Le code JS ci-dessus gère trois événements : le chargement de l'événement de chargement de la fenêtre du document et les événements de clic sur deux boutons. Le traitement de ces trois événements est réalisé en liant la fonction de traitement d'événement à l'aide de l'attribut d'événement de la source d'événement. L'événement de chargement et l'événement de clic du premier bouton sont liés à des fonctions anonymes, tandis que l'événement de clic du deuxième bouton est lié. à une fonction anonyme. Ce qui est déterminé est un nom de fonction.

Il est important de noter que vous ne pouvez pas ajouter "()" après le nom de la fonction liée par oBtn2, sinon la fonction liée deviendra un appel de fonction, qui sera automatiquement appelée et exécutée lorsque le moteur JS exécute cette ligne de code, et Il ne sera pas exécuté lorsque l'événement est déclenché.

La fonction d'événement de chargement de fenêtre sera traitée une fois tous les éléments du document chargés, et l'événement de clic sera déclenché lorsque chaque bouton est cliqué. Après avoir cliqué sur le premier et le deuxième bouton, deux boîtes de dialogue d'avertissement affichant respectivement "salut" et "bonjour" apparaîtront.

Comment ajouter des événements aux éléments ? Trois façons danalyser les événements de liaison JS

3. Utilisez addEventListener() pour lier le gestionnaire

Utiliser l'attribut event de l'objet source d'événement pour lier le gestionnaire d'événement est simple, mais il présente un inconvénient : un événement uniquement. un gestionnaire peut être lié, et la fonction de gestionnaire d'événements liée plus tard écrasera la fonction de gestionnaire d'événements liée précédemment. Dans les applications réelles, un événement provenant d'une source d'événement peut être traité par plusieurs fonctions.

当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。

addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：

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

Copier après la connexion

参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。

通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。

addEventListener() 绑定处理程序示例：

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

Copier après la connexion

【例 4】使用 addEventListener() 绑定事件函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()绑定事件函数</title>
<script>
     function fn1(){
          alert("fn1()");
     }
     function fn2(){
         alert("fn2()");
     }
     function bindTest(){
         document.addEventListener(&#39;click&#39;,fn1,false);//首先绑定fn1函数   
         document.addEventListener(&#39;click&#39;,fn2,false);   
     }
     bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>

Copier après la connexion

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

Comment ajouter des événements aux éléments ? Trois façons danalyser les événements de liaison JS