js中的addEventListener例子

最新推荐文章于 2025-05-04 06:39:57 发布

cpongo11

最新推荐文章于 2025-05-04 06:39:57 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

企鹅我认为v

本文链接：https://blog.youkuaiyun.com/cpongo11/article/details/101027438

本文详细介绍了如何使用addEventListener方法为HTML元素添加事件监听器，包括向同一元素添加多个相同类型的事件、向window添加事件以及如何在使用该方法时传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2015年10月14日 No comments Article

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>

<button id="myBtn">点我</button>

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

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

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

</body>
</html>

利用addEventListener可以向同一个元素添加多个相同类型事件且不会被覆盖

<!DOCTYPE html>
<html>
<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>

向window添加事件

<!DOCTYPE html>
<html>
<body>

<p>实例在window对象中使用 addEventListener() 方法。</p>

<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>

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

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

</body>
</html>

并可以使用匿名函数来传递参数

<!DOCTYPE html>
<html>
<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>

<p>点击按钮执行计算。</p>

<button id="myBtn">点我</button>

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

<script>
var p1 = 5;
var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

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

</body>
</html>

Categories: JavaScript

发表评论取消回复

电子邮件地址不会被公开。必填项已用*标注

姓名 *

电子邮件 *

站点

您可以使用这些HTML标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>