JavaScript HTML DOM 事件监听器

addEventListener() 方法

!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html> 

addEventListener() 方法将事件处理程序附加到指定的元素。

addEventListener() 方法在不覆盖现有事件处理程序的情况下将事件处理程序附加到元素。

可以向一个元素添加多个事件处理程序。

可以将许多相同类型的事件处理程序添加到一个元素，即两个“点击”事件。

可以将事件侦听器添加到任何 DOM 对象，而不仅仅是 HTML 元素。即窗口对象。

addEventListener() 方法可以更轻松地控制事件对冒泡的反应。

使用 addEventListener() 方法时，JavaScript 与 HTML 标记分开，以提高可读性，并允许您添加事件侦听器，即使您不控制 HTML 标记也是如此。

可以使用 removeEventListener() 方法轻松删除事件侦听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（如“ click ”或“ mousedown ”或任何其他 HTML DOM 事件。）

第二个参数是事件发生时我们要调用的函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。

注意

没有为事件使用“on”前缀；使用“ click ”代替“ onclick ”

向元素添加事件处理程序

element.addEventListener("click", function(){ alert("Hello World!"); });

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

还可以引用外部“命名”函数：

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

向同一元素添加多个事件处理程序

addEventListener() 方法允许您向同一元素添加多个事件，而不会覆盖现有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
  alert ("Hello World!");
}

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

可以将不同类型的事件添加到同一元素：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</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>

向窗口对象添加事件处理程序

 addEventListener() 方法允许您在任何 HTML DOM 对象（例如 HTML 元素、HTML 文档、窗口对象或其他支持事件的对象，如 xmlHttpRequest 对象）上添加事件侦听器。

添加一个在用户调整窗口大小时触发的事件监听器：

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

传递参数

传递参数值时，使用“匿名函数”调用带有参数的指定函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

事件冒泡还是事件捕获？

HTML DOM 中有两种事件传播方式，冒泡和捕获。

事件传播是一种在事件发生时定义元素顺序的方法。如果在 <div> 元素中有一个 <p> 元素，并且用户点击了 <p> 元素，应该首先处理哪个元素的“点击”事件？

在冒泡中，首先处理最内层元素的事件，然后再处理外层元素：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获最外层元素的事件时，首先处理然后是内部：将首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

使用 addEventListener() 方法，您可以使用“useCapture”参数指定传播类型：

addEventListener(event, function, useCapture);

默认值为 false，即会使用冒泡传播，当该值设置为 true 时，事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

removeEventListener() 方法

removeEventListener() 方法删除已附加到 addEventListener() 方法的事件处理程序：

element.removeEventListener("mousemove", myFunction);

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</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>

参考地址:JavaScript DOM EventListener