对浏览器事件机制的理解

浏览器事件是什么：

事件是用户操作网页时发生的交互动作，比如 click/move ，事件除了用户触发的动作外，还可以是文档加载，窗口滚动 和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）。

事件触发的过程是怎样的

浏览器的事件触发实际上是有三个阶段的，首先捕获，即从根节点开始传播，一直到目标元素，然后从目标元素开始冒泡，冒泡到根节点。

目前vue不绑定修饰符的话默认都是执行冒泡阶段的回调函数，如果父元素也有绑定点击事件，就会先执行子元素事件，再执行父元素事件。也可以使用capture来指定捕获阶段执行，这样如果父元素绑定的也是捕获事件，那就会先执行父元素的回调，再执行子元素的回调。主要是一个执行先后顺序的问题

对事件委托的理解

事件委托就是利用了事件冒泡的机制，比如ul下的li,本来我们需要给每个li绑定点击事件，但是这样会消耗大量内存，因此我们给ul绑定点击事件，用户点击li的时候，就会冒泡到ul上，执行ul的点击事件，这时候我们利用event.target 来识别实际触发事件的子元素。这个target身上可以获取到li的一些属性，或者当初在li循环的时候就把data-id 定义好，就可以直接用target.dataset.id来获取点击的li元素的id

例如：

javascript 复制代码

<ul @click="myEvent($event)">
  <li :data-id="1">1</li>
  <li :data-id="2">2</li>
  <li :data-id="3">3</li>
</ul>
const myEvent = (event) => {
  console.log(event.target.dataset.id,'event.target')
}

事件委托的使用场景

大量元素需要绑定的情况吧，无限滚动列表、动态渲染的表格数据，比如数据可能动态生成，越来越多，或者会有一些动态生成的dom元素不好绑定【vue已经不需要手动做事件委托了，Vue的模板语法已优化事件处理机制，直接通过@click绑定到子元素时，Vue会复用事件处理器而非重复创建，因此短列表或静态内容无需强制使用事件委托】

事件委托的局限性

当然，事件委托也是有局限的。比如 focus、blur 之类的事件没有事件冒泡机制，所以无法实现事件委托；mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。

如何阻止事件冒泡

vue中使用.stop修饰符，或者手动调用event.stopPropagation