加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

HTML DOM addEventListener() 方法

JavaScript基础 2022-06-08 11:28:21小码哥的IT人生shichen

HTML DOM addEventListener() 方法

HTML DOM Element

实例

向 <button> 元素添加 click 事件：

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>当用户点击按钮时执行函数：</p>
<button id="myBtn">试一试</button>
<p id="demo">
<script>
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

更紧凑的代码：

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>将 click 事件附加到按钮：</p>
<button id="myBtn">试一试</button>
<p id="demo"></p>
<script>
const element = document.getElementById("myBtn");
element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您可以在页面下方找到更多实例。

定义和用法

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

语法

element.addEventListener(event, function, useCapture)

参数

参数 描述
event

必需。事件的名称。

请不要使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。

 

DOM 事件的完整列表
function 必需。事件发生时运行的函数。
useCapture

可选（default = false）。

  • false - 处理程序在冒泡阶段执行。
  • true - 处理程序在捕获阶段执行。

返回值

无。

更多实例

您可以将许多事件添加到同一元素：

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>将两个 click 事件添加到同一个按钮。</p>
<button id="myBtn">试一试</button>
<p id="demo"></p>
<script>
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
function myFunction1() {
  document.getElementById("demo").innerHTML += "第一个函数被执行了！ "
}
function myFunction2() {
  document.getElementById("demo").innerHTML += "第二个函数被执行了！"
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>本例使用 addEventListener() 方法在同一个按钮上添加多个事件。</p>
<button id="myBtn">试一试</button>
<p id="demo"></p>
<script>
const element = document.getElementById("myBtn");
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如需传递参数值，请使用“匿名函数”：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>如何用 addEventListener() 传递参数值。</p>
<p>单击按钮执行计算。</p>
<button id="myBtn">试一试</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

更改 <button> 元素的背景颜色：

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>单击按钮来更改其背景颜色。</p>
<button id="myBtn" style="padding:20px;">试一试</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
  this.style.backgroundColor = "red";
});
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

冒泡和捕获的区别：

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

完整实例：

<!DOCTYPE html>
<html>
<style>
div {
  background-color: coral;
  padding: 16px;
}
</style>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<p>冒泡和捕获的区别：</p>
<div id="myDiv">
  <p id="myP">点击这一段，我在冒泡。</p>
</div><br>
<div id="myDiv2">
  <p id="myP2">单击此段，我在捕获。</p>
</div>
<p id="demo"></p>
<script>
document.getElementById("myP").addEventListener("click", function() {
  myDisplay("您点击了 P 元素！");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
  myDisplay("您单击了 DIV 元素！");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
  myDisplay("您单击了 P 元素！");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
  myDisplay("您单击了 DIV 元素！");
}, true);
function myDisplay(text) {
  document.getElementById("demo").innerHTML += text + "<br>";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

删除事件处理程序：

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

完整实例：

<!DOCTYPE html>
<html>
<style>
#myDIV {
  background-color: coral;
  padding: 16px;
}
</style>
<body>
<h1>Element 对象</h1>
<h2>addEventListener() 方法</h2>
<div id="myDIV">这个橙色元素有一个 onmousemove 事件处理程序，当您在其中移动鼠标时会显示随机数。
  <p>单击“删除”以删除事件处理程序。</p>
  <button onclick="removeHandler()">删除</button>
</div>
<p id="demo"></p>
<script>
const myDiv = document.getElementById("myDIV");
myDiv.addEventListener("mousemove", myFunction);
function removeHandler() {
  myDiv.removeEventListener("mousemove", myFunction);
}
function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浏览器支持

element.addEventListener() 是 DOM Level 2 (2001) 功能。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Yes 9-11 Yes Yes Yes Yes

HTML DOM Element

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024