【Javascript】Javascript高级程序设计：js 事件随手笔记

news2025/2/27 3:00:43

一、事件概述
- 1.1 html 与 js
- 1.2 事件流
- 1.3 DOM 事件流
二、事件处理程序
- 2.1 html 事件处理程序
- 2.2 dom0 级事件处理程序
- 2.3 dom2 级事件处理程序
- 2.4 IE 事件处理程序
三、事件对象
四、事件类型
- 4.1 概述
- 4.2 UI 事件
- 4.3 焦点事件
- 4.4 鼠标与滚轮事件
- 4.5 键盘与文本事件
- 4.6 额外补充
五、事件委托

一、事件概述

1.1 html 与 js

js 与 html 的交互是通过 事件 实现的

事件：文档或浏览器窗口中发生的特定交互瞬间。可以使用侦听器（或处理程序）预订事件，以便执行事件发生的相应代码

下面介绍与事件相关的核心概念

1.2 事件流

事件流：页面中接收事件的顺序。当点击 button 按钮时，也点击了 button 的容器元素，甚至点击了整个页面。

事件流分为：事件冒泡 和 事件捕获

IE 的事件流为事件冒泡

下面，我们通过一个例子展示事件冒泡与事件捕获
事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <button>点击按钮</button>
    </div>

    <script>
        var div = document.querySelector("div");
        var btn = document.querySelector("button");

        document.addEventListener("click", function() {
            console.log("click document");
        })

        div.addEventListener("click", function() {
            console.log("click div");
        })

        btn.addEventListener("click", function() {
            console.log("click button");
        })
    </script>
</body>
</html>

当点击 button 时，冒泡事件按从最精确的目标到最不精确的目标触发，直到冒泡到 document 为止

事件捕获：

// 只需要把addEventListener第三个参数改为 true 即可
        document.addEventListener("click", function() {
            console.log("click document");
        }, true);

        div.addEventListener("click", function() {
            console.log("click div");
        }, true);

        btn.addEventListener("click", function() {
            console.log("click button");
        }, true);

在这里插入图片描述

1.3 DOM 事件流

dom 事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。对应：捕获到事件、实际目标接收到事件、对事件做出响应

事件捕获和事件冒泡都会发生，捕获先发生，冒泡后发生

对于上面的代码所对应的各个阶段，对于 button 点击事件来说：

事件捕获：从点击 button，到 document、body、div。不到 button ，属于事件捕获阶段
目标阶段：button 接收到点击事件并处理事件
冒泡阶段：事件冒泡回 div、body、document 阶段

二、事件处理程序

2.1 html 事件处理程序

元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 html 特性来指定

比如点击事件 onclick

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <button onclick='alert("button被点击");'>点击</button>
</body>
</html>

在这里插入图片描述

2.2 dom0 级事件处理程序

每个元素都有自己的事件处理程序属性。把这种属性值设置为一个函数，就可以指定事件处理程序
<head>
   <title>Document</title>
</head>
<body>
   <button>点击</button>
   <script>
       var btn = document.querySelector("button");
       btn.onclick = function() {
           alert("button 被点击");
       }
   </script>
</body>
</html>
也可以把属性值设置为 null，删除事件

2.3 dom2 级事件处理程序

dom2级事件处理程序定义了两个方法：addEventListener() 和 removeEventListener()

所有 dom 节点都包含了这两个方法。接收三个参数

事件名
处理程序
布尔值。为 true，捕获阶段调用，false，冒泡阶段调用（默认为false）

2.4 IE 事件处理程序

attachEvent
不介绍，感兴趣自行搜索

tips:
html 事件处理程序带 on
dom0 btn.onclick 带 on
dom2 addEventListener 不带 on

三、事件对象

上述事件处理程序，会传入一个参数 event
div.addEventListener("click", function(event) {
	...
}, false);
event 是一个事件对象，所有属性均为只读属性
function 函数中的 this，指向绑定事件的对象!!!!（好好体会）

event 属性	说明
e.target	返回触发事件的元素
e.type	触发事件类型
e.clientX	页面可视区（窗口）
e.pageX	页面（含滚动）
e.screenX	屏幕窗口
e.stopPropagation()	阻止事件捕获或事件冒泡

以上 x 均可换为 y

e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
       div.a {
           width: 400px;
           height: 400px;
           background-color: pink;
       }
       div.b {
           width: 300px;
           height: 300px;
           background-color: green;
       }
       div.c {
           width: 200px;
           height: 200px;
           background-color: yellow;
       }
       div.d {
           width: 100px;
           height: 100px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="a">
       <div class="b">
           <div class="c">
               <div class="d">

               </div>
           </div>
       </div>
   </div>
   <script>
       var diva = document.querySelector("div.a");
       var divb = document.querySelector("div.b");
       var divc = document.querySelector("div.c");
       var divd = document.querySelector("div.d");

       diva.addEventListener("click", a);
      divb.addEventListener("click", b);
       divc.addEventListener("click", c);
       divd.addEventListener("click", d);

       function a() {
          console.log("a");
       }
       function b(e) {
           console.log("b");
           e.stopPropagation();
       }
       function c() {
           console.log("c");
       }
       function d() {
           console.log("d");
       }
   </script>
</body>
</html>

在这里插入图片描述

四、事件类型

4.1 概述

事件类型分为

UI 事件
焦点事件
鼠标事件
滚轮事件
文本事件
键盘事件
变动事件（mutation）：dom 结构变动时触发（不介绍）

4.2 UI 事件

UI 事件 指不一定与用户操作有关的事件。

事件名称	说明
load	当页面全部加载后在 window 上触发
error	当发生 Javascript 错误时在 window 上触发
resize	当窗口大小变化时在 window 上触发
scroll	当用户滚动带滚动条的元素内容时，在该元素上触发

load
当页面完全加载后（包括图片、js 文件、css文件等外部资源）
window.onload = …
window.addEventListener(“load”, …)

4.3 焦点事件

当页面元素获得或失去焦点时触发 |

事件名称	说明
blur	元素失去焦点时触发，该事件`不会冒泡`
focus	获得焦点，`不会冒泡`
focusin	等于focus，`会冒泡`

4.4 鼠标与滚轮事件

事件名称	说明
click	点击事件
dbclick	双击事件
mousedown	鼠标按下任意键
mouseup	鼠标按下后放开
mousemove	鼠标在元素内称动，重复触发
mouseenter	鼠标首次移入元素内部
mouseleave	鼠标离开
mouseout	mouseleave，会`冒泡`
mouseover	mouseenter，会`冒泡`