Écouteur d'événements JavaScript HTML DOM
Méthode addEventListener()
La méthode addEventListener() est utilisée pour ajouter un gestionnaire d'événements à l'élément spécifié.
Le handle d’événement ajouté par la méthode addEventListener() n’écrasera pas le handle d’événement existant.
Vous pouvez ajouter plusieurs gestionnaires d'événements à un élément.
Vous pouvez ajouter plusieurs gestionnaires d'événements du même type au même élément, comme deux événements « clic ».
Vous pouvez ajouter des écouteurs d'événements à n'importe quel objet DOM, pas seulement aux éléments HTML. Tel que : objet fenêtre.
La méthode addEventListener() facilite le contrôle des événements (bullage et capture).
Lorsque vous utilisez la méthode addEventListener(), JavaScript est séparé du balisage HTML, ce qui le rend plus lisible. Vous pouvez également ajouter des écouteurs d'événements sans contrôler le balisage HTML.
Vous pouvez utiliser la méthode removeEventListener() pour supprimer les écouteurs d'événements.
Syntaxe
element.addEventListener(event, function, useCapture);
Le premier paramètre est le type d'événement (tel que "clic" ou "mousedown").
Le deuxième paramètre est la fonction appelée après le déclenchement de l'événement.
Le troisième paramètre est une valeur booléenne utilisée pour décrire si l'événement bouillonne ou capture. Ce paramètre est facultatif.
Remarque : N'utilisez pas le préfixe « on ». Par exemple, utilisez « clic » au lieu de « onclick ».
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>Ajouter plusieurs gestionnaires d'événements au même élément
La méthode addEventListener() permet d'ajouter plusieurs événements au même élément sans écraser les événements existants :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击查看</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函数已执行!")
}
</script>
</body>
</html> Ajouter un gestionnaire d'événements à la fenêtre object
La méthode addEventListener() vous permet d'ajouter des écouteurs d'événements aux objets HTML DOM tels que les éléments HTML, les documents HTML et les objets fenêtre. Ou d'autres objets d'événement de dépenses tels que : objet xmlHttpRequest.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>Passer des paramètres
Lors du passage des valeurs de paramètres, utilisez des "fonctions anonymes" pour appeler des fonctions avec des paramètres :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击查看结果</button>
<p id="demo"></p>
<script>
var p1 = 8;
var p2 = 8;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>Bullage d'événement ou capture d'événement ?
Il existe deux manières de diffuser un événement : le bouillonnement et la capture.
La livraison d'événement définit l'ordre dans lequel les événements d'élément sont déclenchés. Si vous insérez un élément <p> dans un élément <div> et que l'utilisateur clique sur l'élément <p>, quel événement « clic » de l'élément sera déclenché en premier ?
En bullage, l'événement de l'élément interne sera déclenché en premier, puis celui de l'élément externe, c'est-à-dire : l'événement click de l'élément <p> sera déclenché en premier, puis l'événement click de l'élément <div> sera déclenché.
En capture, l'événement de l'élément externe sera déclenché en premier, puis l'événement de l'élément interne sera déclenché, c'est-à-dire : l'événement click de l'élément <div> puis l'événement de l'élément <p> sera déclenché.
La méthode addEventListener() peut spécifier le paramètre "useCapture" pour définir le type de diffusion :
addEventListener(event, function, useCapture);
Valeur par défaut Si elle est fausse, cela signifie une livraison par bulle. Lorsque la valeur est vraie, l'événement sera livré en utilisant la capture.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv">
<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你点击了 P1 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你点击了 DIV1 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV2 元素 !");
}, true);
</script>
</body>
</html>méthoderemoveEventListener()
la méthoderemoveEventListener() supprime les gestionnaires d'événements ajoutés par la méthode addEventListener() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
}
</style>
</head>
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点击暂停</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
