HTML--javascript（6) HTML DOM EventListener

爱吃萝卜和青菜.

于 2024-12-29 21:15:42 发布

阅读量675

点赞数 20

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/m0_73056701/article/details/144810304

版权

零、简单解释一下addEvenListener方法的作用

event：要监听的事件名称（不带 on 前缀），例如 click, mouseover, change 等。
主要用于添加监听事件，当用户触发时，才会给DOM添加该事件。
这个方法比直接在HTML属性中设置事件处理程序更加灵活和强大。

一、向同一个元素中添加一个事件句柄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

二、向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>

三、向 Window 对象添加事件句柄

resize 是一个事件类型，用于检测浏览器窗口或某个元素的大小是否发生变化。具体来说，resize 事件在以下情况下触发：

浏览器窗口调整大小：当用户通过拖动浏览器窗口的边框来改变窗口的大小时，会触发 resize 事件。

嵌入的iframe调整大小：如果HTML文档中包含嵌入的 <iframe>，并且该 <iframe> 的大小发生变化，也会触发 resize 事件。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<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>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<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>