Comment lier des événements en javascript-js tutoriel-php.cn

Méthode : 1. Utilisez l'attribut d'événement onclick de la balise HTML pour lier le gestionnaire, la syntaxe "onclick="event handler"" ; 2. Utilisez l'attribut d'événement de la source d'événement pour lier le gestionnaire, la syntaxe "obj .on event name= "Handling function"; 3. Utilisez addEventListener() pour lier le gestionnaire.

Comment lier des événements en javascript

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

Pour que le navigateur appelle automatiquement le gestionnaire d'événements correspondant pour gérer l'événement lorsque l'événement se produit, il est nécessaire de lier le 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 les gestionnaires d'événements :

Utilisez l'attribut event en cliquant sur la balise HTML pour lier le gestionnaire 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 pour le moment.
Utilisez l'attribut event de la source d'événement 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.
Utilisez la méthode addEventListener() pour lier des événements et des gestionnaires 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 d'une balise HTML pour lier un gestionnaire d'événement, le code de script dans l'attribut event ne peut pas contenir de déclaration 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 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 de clic, et il lie deux codes de script via l'attribut d'événement. onclick de la balise 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.

Lorsque le gestionnaire d'événements implique plus de 2 codes, si la liaison d'un gestionnaire d'événements comme l'exemple 1 rendra le programme moins lisible, vous pouvez définir le gestionnaire d'événements comme une fonction, puis appeler la fonction dans l'attribut d'événement

Comment lier des événements en javascript

. [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 le montrent les deux exemples ci-dessus, l'attribut d'événement de balise. mélange le code de script JS et les balises HTML, ce qui viole les règles. Par conséquent, il n'est pas bon d'utiliser les attributs d'événement des balises HTML pour lier les gestionnaires d'événements, et doit être évité dans les applications pratiques. 2. Utiliser la liaison d'attribut d'événement des sources d'événements.

L'une des façons de séparer HTML et JS consiste à lier la fonction de gestionnaire d'événements à l'aide de l'attribut d'événement de la source d'événement.

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

Copier après la connexion

L'obj au format est l'objet source de l'événement. Le programme d'événement 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 event de la source de l'événement pour lier la fonction de 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 l'événement de clic des deux boutons. obtenu en liant la fonction de gestionnaire d'événements avec 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é à un nom de fonction

Il est important de noter qu'elle ne peut pas être liée dans oBtn2. Ajoutez "()" après le nom de la fonction, sinon la fonction liée devient un appel de fonction, qui sera automatiquement appelée et exécutée lorsque le moteur JS exécute cette ligne de code, mais 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 lier des événements en javascript 3. Utilisez addEventListener() pour lier le gestionnaire

Comment lier des événements en javascript

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 gestion d'événements liée plus tard écrasera la fonction de gestion 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 lier des événements en javascript