前端面试--JS=＞ 谈谈事件冒泡事件捕获和事件委托

Posted 2021-07-23 °PJ想做前端攻城狮

前言

​ 事件冒泡、事件捕获、事件委托、事件绑定可以说是javascript基础中最为重要的知识点

公司：腾讯

---

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

包括三个阶段：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

我们知道，在dom模型中，html是多层次的，当一个html元素上产生事件时，该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个节点，都会收到这个事件，这就是dom事件流。当事件发生后，就会从内向外逐级传播，因为事件流本身没有处理事件的能力，所以，处理事件的函数并不会绑定在该事件源上。例如我们点击了一个按钮，产生了一个click事件，click事件就会开始向上传播，一直到到处理这个事件的代码中。

事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。

注意:

• JS代码只能执行捕获或者冒泡其中的一个阶段
• onclick 和 attachEvent 只能得到冒泡阶段
• addEventListener (type, listener[, useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段电泳事件处理程序。
• 在实际开发中，我们很少使用事件捕获(低版本ie不兼容)，我们更关注事件冒泡
• 有些事件是没有冒泡的，比如onblur、onfocus、onmouseover、onmouseleave
• 虽然事件冒泡有时候会带来麻烦，但是有时候又会巧妙的做某些事情，我们后面讲解

事件对象

• event 就是一个事件对象，写道我们的侦听函数的小括号里面，当形参来看
• 事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
• 事件对象是我们的事件的一系列相关数据的集合，比如鼠标点击里面就包含了鼠标的相关信息
• 这个事件对象我们可以自己命名，比如 event、evt 、e 等
• 事件对象也有兼容性问题。 IE 6、7、8通过 window.event 实现

兼容性写法：

event = event || windoe.event;

事件对象常见额属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.scrElement	返回触发事件的对象 非标准 IE 6 7 8 使用
e.type	返回事件的类型，比如click、mouseover等，不带 on
e.cancelBubble	该属性阻止冒泡，非标准，IE 6 7 8 使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ，IE 6 7 8 使用，比如不让链接跳转
e.preventDefaule()	该方法阻止默认事件（默认行为）标准 ，比如不让链接跳转
e.stopPropagation()	阻止冒泡，标准

e.target 和 this 的区别

this 返回的是绑定事件的对象（元素）

e.target 返回的是点击的那个对象，就是谁触发了这个事件,如点击事件->谁被点了

var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
    console.log(this);
    console.log(e.target);
})

// <ul>...</ul>
// <li>123</li>

阻止对象默认行为（重）

三种方法：

• e.preventDefaule();
  是一个方法，适合普通浏览器
• e.returnValue; 是一个属性，适用于 IE 6 7 8
• return false;
  没有兼容性问题，但是需要注意后面的语句就不执行了，直接跳出

阻止冒泡（重）

• event.stopPropagation(); // 一般浏览器停止冒泡
• event.cancelBubble; // IE 6 7 8 的停止冒泡

var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('click', alertName, false);
son.addEventListener('click', alertName, false);
document.addEventListener('click',function () {
    alert('document');
}, false);
function alertName (event) {
    alert(this.getAttribute("class"));
    event.stopPropagation();    // 停止冒泡
    event.cancelBubble;         // IE 6 7 8 的停止冒泡
}

事件委托（代理、委派）

事件委托的原理（重）

事件委托的原理：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。

例如： 给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li ，然后事件冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

事件委托的作用

只操作了一次 DOM ，提高了程序的性能。

为什么要事件委托?（重）

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的操作dom,那么引起浏览器重绘和回流的可能也就越多，页面交互的事件也就变的越长，这也就是为什么要减少dom操作的原因。每一个事件处理函数，都是一个对象，那么多一个事件处理函数，内存中就会被多占用一部分空间。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

事件委托小案例

需求：鼠标放到li上，对应的li背景颜色变为灰色

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

普通实现

(给每个li都绑定一个事件让其变灰）：

$("li").on("mouseover",function(){
　　　$(this).css("background-color","gray").siblings().css("background-color","white");
})

上面这种普通实现看似没有什么问题，但是如果在这段代码结束以后，我们动态的给ul又增加了一个li，那么新增的这个li是不带有事件的，如果有无数个li结点，我们的dom是吃不消的。

使用事件委托实现

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素

利用事件冒泡 只指定ul的事件处理 就可以控制ul下的所有的li的事件

$("ul").on("mouseover", function(e) {
    $(e.target).css("background-color", "gray").siblings().css("background-color", "white");
})

• 第一步：给父元素绑定事件

  给元素ul添加绑定事件，绑定mouseover事件设置css（也可通过addEventListener为点击事件click添加绑定）

• 第二步：监听子元素的冒泡事件

  这里默认是冒泡，点击子元素li会向上冒泡

• 第三步：找到是哪个子元素的事件

  通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标（可以通过判断target的类型来确定是哪一类的子元素对象执行事件）