é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中文網(wǎng)(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中文網(wǎng)(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 ("函數(shù)已執(zhí)行!")
}
</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中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>嘗試重置瀏覽器的窗口觸發(fā) "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中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點擊查看結(jié)果</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中文網(wǎng)(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中文網(wǎng)(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 事件句柄，鼠標(biāo)在桔紅色的框內(nèi)移動時會顯示隨機數(shù)。
<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>
