【前端面试--JS】=＞ 谈谈事件冒泡、事件捕获和事件委托(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);

})

//

• …

//

• 123

• 阻止对象默认行为（重）

  三种方法：

  • 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背景颜色变为灰色

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！