2021.11.25--12.事件进阶-CSDN博客

本文链接：https://blog.csdn.net/qq_41083616/article/details/121537768

12.1 事件监听器

在JavaScript中，想要给元素添加一个事件，其实我们有以下2种方式。
（1）事件处理器
在前面的学习中，如果想要给元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫“事件处理器”，例如

oBtn.onclick = function(){……};

如果想要解除“事件处理器”添加的事件，我们可以使用“obj.事件名 = null;”
（事件处理器是没办法为一个元素添加多个相同事件的）
（2）事件监听器
1．绑定事件
所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件，我们又称之为“绑定事件”。

obj.addEventListener(type , fn , false)

①obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
②type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。
③fn是一个函数名，或者一个匿名函数。
④false表示事件冒泡阶段调用。对于事件冒泡，我们在JavaScript进阶教程再详细介绍。这里简单了解即可
2．解绑事件
在JavaScript中，我们可以使用removeEventListener()方法为元素解绑（或解除）某个事件。解绑事件与绑定事件是相反的操作

obj.removeEventListener(type , fn , false);

tips: 如果你想要使用removeEventListener()方法来解除一个事件，那么当初使用addEventListener()添加事件的时候，就一定要用定义函数的形式。

12.2 event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象。
在这里插入图片描述
tips: e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false），我们注意一下两者的区别。

12.3 this

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
案例分析：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oUl = document.getElementById("list");
            var oLi = oUl.getElementsByTagName("li");
            for (var i = 0; i < oLi.length; i++) 
            {
                oLi[i].onclick = function () 
                {
                    oLi[i].style.color = "hotpink";
                }
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

一开始想要实现的效果是：点击哪一个li元素，就改变这个li元素的颜色。很多人自然而然就写下了上面这种代码。然后测试的时候，会发现完全没有效果。这是怎么回事呢？我们试着把oLi[i].style.color = “hotpink”;这一句换成this.style.color = “hotpink”;就有效果了。
为什么用oLi[i]就不正确，而必须要用this呢？其实这就是典型的闭包问题。对于闭包，我们在JavaScript进阶中再详细介绍。