添加一个在用户单击按钮时触发的事件侦听器:
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 事件对象参考。