JS 事件捕获、事件冒泡以及事件委托图文详解

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_40169665/article/details/84794395

  核心：JS的点击事件会先一层一层捕获到target元素，然后再从target元素沿着路径一层层向上冒泡
最重要的就是理解它的路径
测试界面：

  这里先展示一下路径的形式（以点击测试界面的son为例子）

  通过这个path帮助我们理解事件捕获以及事件冒泡：当我们点击了son之后，浏览器先从window一层一层向下找，最终找到我们的son，这个阶段称为事件捕获阶段，捕获结束后，就从target son 一层一层向window冒泡，这个阶段称之为事件冒泡。
  我们默认的监听事件都是在冒泡阶段执行的，要想在捕获阶段执行则需要给监听函数的第三个参数赋为true。
  从图中我们也可以看到cancleBubble && cancelable && defaultPrevent
  cancelable的truith代表我们是否可以取消冒泡
  cancleBubble的truith代表我们是否取消了冒泡
  defaultPrevent的truith代表我们是否禁止默认行为
(题外话，最新版浏览器基本都支持passive，在passive为true的监听事件里调用preventDefault会失效，而且在监听touchstart以及touchmove里默认都是passive:true，所以想要在监听函数里调用preventDefault()禁止页面滚动需要addEventListener的第三个参数为{passive:false}，这里的passive主要是为了提升性能，google做过数据调查只有20%的监听函数里会调用preventDefault，所以为了性能提升，就不等待监听函数的执行而是直接默认为你不禁止默认行为，从而让用户滑动的时候不会感觉到卡顿)
  在handler中，我们可以调用stopPropagation去阻止冒泡或者捕获（取决于你的处理函数执行在哪个阶段，路径上所有的target都可以阻止浏览器继续传播事件，也就是说我点击了son，但是在father的捕获阶段就stopPropagation，则son的handler就永远不会执行了，因为它根本没有接收到click事件）
  通过事件冒泡以及事件捕获，我们就可以实现事件委托了
  事件委托的概念：通过动态生成的元素，一开始并不在dom树上，所以不可以直接通过querySelector选择然后监听，于是通过监听它的父节点去间接监听我们的预期target。
  我们知道，当我们点击了target后，它会一层一层捕获然后又一层层冒泡，那么我们就可以在它的路径上（也就是监听它的任一父节点）判断target是不是我们的预期target（通过判断标签、class以及ID等方式去区别），是的话我们就执行handler，不是的话就不做处理。通俗点来说就是我不知道你什么时候回家，但是我知道你爸爸肯定知道你什么时候回家，那我只需要将handler交给你爸，当你爸知道你回家之后就去执行handler