JavaScript DOM 事件监听器


目录

    显示目录


addEventListener() 方法

例子

添加一个在用户单击按钮时触发的事件侦听器:

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

自己尝试一下 →

<!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() 方法删除已被删除的事件处理程序 附有 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>



HTML DOM 事件对象参考

有关所有 HTML DOM 事件的列表,请查看我们完整的 HTML DOM 事件对象参考。