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

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

| 事件对象属性方法 | 说明 |

| — | — |

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

• 普通实现

  (给每个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”);

  })

  最后

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

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

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

  

  

  

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

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

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

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

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