JavaScript HTML DOM EventListener
Méthode addEventListener()
L'événement d'écoute est déclenché lorsque l'utilisateur clique sur le bouton :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>addEventListener( ) est utilisée. Ajoute 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 est bullé ou capturé. Ce paramètre est facultatif.
Remarque : N'utilisez pas le préfixe "on". Par exemple, utilisez « clic » au lieu de « onclick ».
Ajouter un gestionnaire d'événements à l'élément d'origine
Lorsque l'utilisateur clique sur l'élément, "Hello World!" apparaît :
<!DOCTYPE html>
<html>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>Vous pouvez utiliser le nom de la fonction pour reportez-vous à la fonction externe :
"Hello World!" apparaît lorsque l'utilisateur clique sur l'élément :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
</html>Ajouter plusieurs gestionnaires d'événements au même élément
Le addEventListener () permet d'ajouter plusieurs gestionnaires d'événements au même événement d'élément et n'écrasera pas les événements existants :
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<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>Vous pouvez ajouter différents types d'événements au même élément :
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>" }
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
/script>
</body>
</html>Ajouter des gestionnaires d'événements aux objets Window
La méthode addEventListener() vous permet d'ajouter des écouteurs d'événements aux objets HTML DOM tels que des éléments HTML, des documents HTML et des objets window. Ou d'autres objets d'événement de dépenses tels que : objet xmlHttpRequest.
Ajoutez un écouteur d'événement lorsque l'utilisateur réinitialise la taille de la fenêtre :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>实例在window对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>Passer les paramètres
Lorsque vous transmettez les valeurs des paramètres, utilisez une "fonction anonyme" pour appeler une fonction avec des paramètres :
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5; var p2 = 7;
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>Bouillonnement 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);
La valeur par défaut est faux, et la livraison par bulle, lorsque la valeur est vraie, l'événement utilise la livraison par capture.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px; }
</style>
</head>
<body>
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<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("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你点击了 DIV 元素 !"); },
false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P 元素!"); }, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV 元素 !"); }, true);
</script>
</body>
</html>méthoderemoveEventListener()
la méthoderemoveEventListener() supprime le gestionnaire d'événements ajouté par la méthode addEventListener() :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>Le navigateur prend en charge
le formulaire Le numéro in représente le numéro de version du premier navigateur prenant en charge cette méthode.
Méthode
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEven tListener() 1.0 9.0 1.0 1.0 7.0
Remarque : IE 8 et les versions antérieures d'IE, Opera 7.0 et les versions antérieures ne prennent pas en charge les méthodes addEventListener() et removeEventListener(). Cependant, pour ces versions de navigateur, vous pouvez utiliser la méthode detachEvent() pour supprimer le handle d'événement :
element.attachEvent(event, function element.detachEvent(event, function);
Solution multi-navigateurs :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
x.addEventListener("click", myFunction);
}else if (x.attachEvent) {
x.attachEvent("onclick", myFunction); }
function myFunction() {
alert("Hello World!"); }
</script>
</body>
</html>section suivante
