JavaScript 事件监听器 addEventListener() 方法和一些基本的事件

最新推荐文章于 2024-09-08 12:57:21 发布

千帆过尽皆不是

最新推荐文章于 2024-09-08 12:57:21 发布

阅读量4.5k

点赞数 31

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52530691/article/details/140099274

版权

JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一. HTML DOM 事件

什么是事件？

事件是在编译的过程中发生的事情，当事件发生的时候计算机可以自动采取某种行动（即运行一些代码，通常是我们所制定的函数）。常见的事件有：

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

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() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。

2.1 语法知识

element.addEventListener(event, function, useCapture)

event：

必须填写不可省略。

注意: 在 addEventListener() 方法中不能使用 "on" 前缀，会报错。例如，我们要使用 "click" ,而不是使用 "onclick"。

function：

必须填写不可省略。

事件发生时运行的函数。

useCapture:

可以省略不写，默认值是 false

true ：使用事件捕获

false ：使用事件冒泡

2.2 addEventListener() 方法的性质

可以使用外部函数，也可以使用隐函数
向一个元素添加多个相同类型的事件处理程序。
向一个元素添加多个事件处理程序
可以向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 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>