《JavaScript进阶之事件高级内容》

最新推荐文章于 2025-07-15 00:00:00 发布

原创最新推荐文章于 2025-07-15 00:00:00 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

前端专栏收录该内容

52 篇文章

订阅专栏

本文探讨JavaScript事件的高级内容，包括事件的概念、作用，传统与现代事件注册/绑定方法，删除事件，事件流模型，Event对象特性，以及事件委托的原理与应用。重点讲解了事件委托在优化性能和处理动态元素上的优势。

《JavaScript进阶之事件高级内容》

1、什么是事件

这个元素对象所具备的一些被动能力，当该元素被进行某种方式的触发之后，会对与自己绑定的某些函数进行处理和执行，我们将这种触发叫做元素的事件。

2、事件的作用

事件是javaScript和DOM之间交互的桥梁。你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。

典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

3、注册/绑定事件

解释：给指定元素添加事件的行为，我们称之为注册事件或者绑定事件。

2.1 传统方式

步骤

		1. 找到on开头的事件，比如：onclick、onload……等
		2. 将指定元素与该事件进行绑定
        			3. 将元素和绑定的事件直接赋值给一个函数，或者要处理的代码

//语法格式：
	元素对象.事件名 = function(){
		代码块；
	}

特点

注册事件具有唯一性。同一个元素同一个事件只能设置一个处理函数，当前注册的处理函数会将前面注册的处理函数覆盖。

2.2监听注册方式

**介绍：**该方式是W3C标准推荐的一种注册事件的方式

步骤

		1. 获取要绑定的事件的元素对象
		2. 用该元素对象点出addEventListener方法
        			3. 给该方法的第一个参数type传入事件类型（事件名称前不加on）
              			4. 给该方法的第二个参数listener传入事件处理的函数
        			5. 第三个参数options是可选参数，boolean值，作用于事件流。true表示在事件捕获阶段调用事件处理函数，反之为false就是表示事件在冒泡阶段处理函数。

//语法格式：
元素对象.addEventListener(事件类型,函数名称/匿名函数);

注意：

IE以前的旧版本不支持以上绑定事件的方法，所以可以使用(元素对象.attchEvent())的方法注册事件

4、删除事件

3.1 传统方式

//语法格式：
	元素对象.事件名 = function(){
		代码块；
         //当该事件触发完以后删除事件，或者说还原
		绑定事件的元素对象.事件类型 = null；
        // 因为事件没有绑定之间默认值就是null，所以我们只要将它赋值为null即可
	}

3.2 监听方式

// 语法格式：
	绑定事件的元素对象.removeEventListener(事件类型，方法名);

注意：

IE以前的旧版本不支持以上删除事件的方法，所以可以使用(元素对象.detachEvent())的方法删除事件

5、事件流

5.1 什么是事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程就是DOM事件流。简单来说事件流就是从页面中接收事件的顺序。

5.2 两种事件流模型

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

1、冒泡型事件流

IE提出，事件的传播是从最具体的元素事件接收，然后逐个向上级最不具体的元素事件传播到DOM的最顶层节点，即从DOM树的叶子到根。

在这里插入图片描述

2、捕获型事件流

网景提出，事件的传播是从最不具体的元素事件开始，然后逐级向下一级传播到最具体的元素事件接收，即从根到DOM树的叶子。

5.3 DOM事件流

DOM标准采用捕获+冒泡。这两种事件都会触发DOM的所有对象，从DOM对象开始也在DOM对象结束。

W3C最终统一协调规定：先捕获再冒泡，并规定事件流包括三个阶段：事件捕获阶段、当前目标阶段、事件冒泡阶段。

5.4 DOM事件流三阶段

1、**事件捕获阶段：**检查具有这个事件的所有元素从外到内有哪些

2、**当前目标阶段：**事件当前的处理者

3、**冒泡阶段：**按照从内到外的顺序依次进行事件冒泡

在这里插入图片描述

注意：

JavaScript代码中只能执行事件捕获或者事件冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
addEventListener 函数的第三个参数：true表示再事件捕获阶段调用事件处理函数，反之为false就是表示事件在冒泡阶段处理函数
实际开发中很少使用事件捕获，而更关注的是事件冒泡
有些事件没有事件冒泡阶段，比如onblur(对象失去焦点后)、onfocus、onmouseenter(鼠标移动到图片上)、onmouseleave(鼠标移出元素后)
事件冒泡在实际开发中某些时候会产生一系列的问题需要注意。

6、Event(事件)对象

6.1 什么是事件对象

事件对象就是当我们触发一个事件后，对该事件的一些描述信息。例如，你触发了一个点击事件，你点在哪个位置，坐标是多少；或者是当你触发一个键盘事件的时候，你按的是哪个键。

每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象Event

6.2 事件对象的使用

事件触发时就会产生事件对象，并且会自动跟随事件函数的参数传递，事件对象Event会当作事件函数的实参传递到函数内部，所有要使用事件对象，则需要给事件绑定的函数添加一个形参，这个形参来接收事件对象 Event。

但在IE低版本中这种方法存在兼容性的问题，所有在旧版本中通常使用浏览器中的window对象寻找event，再获取相关对象。

6.3 事件对象属性

keyCode：键盘事件键盘按下时键盘的大写字母的ASCII码值
key：键盘事件键盘按下时按键的键值
clientX：鼠标相对于浏览器窗口可视区域的X坐标
clientY：鼠标相对于浏览器窗口可视区域的Y坐标
pageX：鼠标相对于当前Document文档的X坐标(IE9以上)
pageY：鼠标相对于当前Document文档的Y坐标(IE9以上)
screenX：鼠标相对于显示器的X坐标
screenY：鼠标相对于显示器的Y坐标
target：返回触发事件的对象(标准)
srcElement：返回触发事件的对象(非标准)
type：返回触发事件的事件类型
cancelBubble：该属性阻止事件冒泡(非标准)
stopPropagation()：该方法阻止事件冒泡(标准)
returnValue：该属性阻止默认事件(非标准)
preventDefault()：该方法阻止默认事件(标准)

6.4 事件中this与target的区别

e.target：是事件触发的元素
this：是事件绑定的元素

7、事件委托

7.1 什么是事件委托

事件委托又叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。简单来说就是把一个元素响应事件的函数委托到另一个元素。实则就是不给子元素绑定事件，只给夫元素注册事件，把处理代码在父元素的事件中执行。

7.2 解释

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

7.3 为什么要使用事件委托

我在以前的学习中给ul下的每个li添加相同的事件，使用for循环的方式添加，但我们不知道它的效率如何。在JS中添加事件的数量将直接关系到页面的整体运行性能，如果使用事件委托则大大减少了交互的次数，优化了性能。并且函数或者对象越多销毁的内存就会越多，而事件委托就大大减小了函数对象的创建成本。

7.4 委托的原理

给父元素注册事件，利用事件冒泡的原理，当子元素的事件触发，最后会冒泡到父元素，然后控制响应的子元素。

举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

7.5 委托的使用

只操作一次DOM，提高程序的性能
动态创建的子元素也用于此事件

<!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>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        window.onload = function() {
            var ul = document.querySelector("ul");
            ul.addEventListener("click", function(e) {
                console.log(e.target);
                console.log(this);
                e.target.style["backgroundColor"] = "pink";
            })
        }
    </script>
</body>

</html>