Maison >interface Web >js tutoriel >Comment lier des événements en javascript
Comment lier des événements en javascript
- 青灯夜游original
- 2021-07-19 14:14:273878parcourir
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.
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='PHP中文网';alert(name);" value="事件绑定测试"/>
</body>
</html>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
<!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>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事件名 = 事件处理函数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('hi')
};
[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('hello');
}
//获取事件源对象
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>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.
当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。
addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：
事件源.addEventListener(事件名称,事件处理函数名,是否捕获);
参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。
通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。
addEventListener() 绑定处理程序示例：
document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡 document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获
【例 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('click',fn1,false);//首先绑定fn1函数
document.addEventListener('click',fn2,false);
}
bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。
【推荐学习：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!
Articles Liés
Voir plus- Comment déterminer si une chaîne spécifiée est contenue dans javascript
- JavaScript est-il un langage de script Web ?
- Comment convertir une valeur numérique en chaîne en javascript
- Comment taper l'instruction de sortie javascript
- Comment saisir des données en javascript
- Qu'est-ce qui est défini en JavaScript ? Quand l'utiliser ? Comment utiliser ?
- Quelles sont les différences entre les deux types de portées de variables en JavaScript ?