JS addEventListener() 用法、参数及常见事件类型详解

HTML DOM 事件

什么是事件？

事件是指在网页运行过程中发生的特定动作或状态变化。当这些事件触发时，浏览器会自动执行预先定义的 JavaScript 代码（通常是特定的函数）。常见的事件类型包括：

单击事件
双击事件
鼠标划入
鼠标划出
鼠标悬停
键盘按键按下
键盘按键松开

1.1 鼠标事件

onclick	在对象被点击的时候发生
ondblclick	在对象被双击的时候发生
onmousedown	在鼠标被按下的时候发生
onmouseup	在鼠标被松开的时候发生
onmousemove	在鼠标被移动的时候发生
onmouseover	在鼠标指针被移动到指定元素的时候发生
onmouseout	在鼠标指针被移出到指定元素的时候发生

1.2 键盘事件

onkeydown	键盘被按下的时候触发事件
onkeypress	在键盘按下一个键，然后再松开的时候会触发
onkeyup	当键盘上的一个键被松开的时候会触发

1.3 表单事件

onblur	元素失去焦点时触发
onfocus	元素获取焦点时触发
oninput	元素获取用户输入时触发
onreset	表单重置时触发
onselect	用户选取文本时触发 (比如 <input> 和 <textarea> 中的内容)
onsubmit	表单提交时触发

1.4 其他相对常见的事件

onscroll	指定元素滑轮发生滚动的时候会触发事件
onresize	窗口或框架被重新调整大小。
onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

二. addEventListener() 方法的介绍和使用

addEventListener() 方法用于向指定的 DOM 元素添加事件处理程序。当浏览器检测到指定类型的事件发生时，便会执行绑定的函数代码。

2.1 语法知识

element.addEventListener(event, function, useCapture)

event：

该参数为必填项，不可省略。

注意：在 addEventListener() 方法中，事件名称不能使用 "on" 前缀，否则会导致错误。例如，应使用 "click" 而不是 "onclick"。

function：

该参数为必填项，不可省略。

指定事件触发时要执行的函数。

useCapture：

该参数为可选，默认值为 false。

true ：启用事件捕获阶段监听

false ：启用事件冒泡阶段监听（默认）

2.2 addEventListener() 方法的性质

支持使用外部定义的函数，也支持使用匿名函数（隐函数）。
允许向同一个元素添加多个相同类型的事件处理程序。
允许向同一个元素添加不同类型的多个事件处理程序。
不仅限于 HTML 元素，还可以向任何 DOM 对象（如 window 对象）添加事件处理程序。
支持配置事件监听是在捕获阶段还是冒泡阶段执行。
支持移除事件监听（参见 removeEventListener() 方法）。

2.2.1 使用外部函数与隐函数

使用外部函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "测试成功";
    }
</script>
</html>

使用隐函数（匿名函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click", function(){
        document.getElementById("demo").innerHTML = "测试成功";
    });
</script>
</html>

2.2.2 向一个元素添加多个事件处理程序

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    document.getElementById("btn").addEventListener("click",myFunction);
    
    function DEMO(){
        alert("第一个函数测试成功")
    }

    function myFunction(){
        alert("第二个函数测试成功")
    }
</script>
</html>

2.2.3 向一个元素添加多个相同类型的事件处理程序

需要打开浏览器控制台查看执行结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    let btn =  document.getElementById("btn");
    btn.addEventListener("mouseover", myFunctionOver);
    btn.addEventListener("click", DEMO);
    btn.addEventListener("mouseout", myFunctionOut);

    function myFunctionOver(){
        console.log("mouseover","鼠标移入")
    }

    function DEMO(){
        console.log("click","鼠标点击")
    }

    function myFunctionOut(){
        console.log("mouseout","鼠标移出")
    }
</script>
</html>

2.2.4 监测window 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = "页面宽度或者高度改变";
    });
</script>
</html>

2.2.5 捕获与冒泡

冒泡：事件从最具体的元素开始，逐级向上传播至外层元素。

捕获：事件从最外层的文档根节点开始，逐级向下传播至目标元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>

    <style>
        div 
        {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <p id="myP">点击该段落， 我是冒泡</p>
    </div><br>
    <div id="myDiv2">
        <p id="myP2">点击该段落， 我是捕获</p>
    </div>
</body>
<script>
   document.getElementById("myP").addEventListener("click", function() 
    {
        alert("你点击了 P 元素!");
    }, false);

    document.getElementById("myDiv").addEventListener("click", function()
    {
        alert("你点击了 DIV 元素!");
    }, false);

    document.getElementById("myP2").addEventListener("click", function() 
    {
        alert("你点击了 P 元素!");
    }, true);
    
    document.getElementById("myDiv2").addEventListener("click", function() 
    {
        alert("你点击了 DIV 元素!");
    }, true);
</script>
</html>

2.2.6 可以被删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <br>
    <br>
    <button onclick="shut()">关闭监测按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "测试成功";
        alert("测试成功")
    }
    
    function shut(){
        document.getElementById("btn").removeEventListener("click", DEMO);
        document.getElementById("demo").innerHTML = "";
        alert("监测关闭，显示内容为空,再次点击测试按钮没有反应")
    }

</script>
</html>

三. 小探讨

如果读者有兴趣，可以自行测试 addEventListener() 方法中不同参数的传参效果。

PS：DEMO 是 "demonstration" 的缩写。DEMO 的中文含义为“示范”、“展示”、“样片”、“样稿”或“原型”，通常指具有示范或展示功能的事物。

到此这篇关于 JavaScript 事件监听器 addEventListener() 方法和一些基本事件详解的文章就介绍到这了，更多相关 JS 事件监听器 addEventListener() 方法内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

JavaScript addEventListener() 方法详解与事件类型指南