JavaScript HTML DOM之 addEventListener()

zero_1996

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-03-04 01:00:35 发布 505 阅读 AI 写同款· GEO 优化 ›

前端必知必会-JavaScript HTML DOM EventListener 本文介绍了JavaScript HTML DOM EventListener的使用，如有问题欢迎私信和评论。阅读详情

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

该方法的标准形式：element.addEventListener(event, function, useCapture);
event为事件：click 或者 mouseover/mouseout

function为函数，即自定义的方法

useCapture为描述事件，可以不用。

具体事例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
//新附加了一个弹窗的点击事件。
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

多个函数的附加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<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>

多个事件的叠加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<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>