37、事件模型（事件代理）(重要)

是指从事件发生开始，到所有处理函数执行完，所经历的过程。大概包括: 3个阶段

1）捕获阶段: 首先 Window 捕获事件,之后往目标传递,在到达目标节点之前的过程，就是捕获阶段（Capture Phase）

2）目标阶段: 真正触发点击的元素，事件会触发两次（捕获一次，冒泡一次）

3）冒泡阶段: 从目标元素向window传递。

从外到内捕获，从内到外执行冒泡

37、什么是js的 ？Vue中如何阻止冒泡事件？（从上一题的第三点拿出来说事）

js冒泡概念：当父元素内多级子元素绑定了同一个事件，js会依次从内往外执行每个元素的该事件，从而引发冒泡

js解决冒泡：event.stopPropagation()

vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

例子：stopPropagation()方法可以阻止事件冒泡：

div.addEventListener("click',function(e){

  e.stopPropagation();

},true)   //true代表捕获

// 这样div的父元素就接收不到事件了,addEventListener可以绑定多个事件处理函数，而DOM绑定就只能一个事件处理函数（达内5-11-1小时）

1. 谈谈事件委托/事件代理的作用？

【JavaScript面试题】事件委托_哔哩哔哩_bilibili

1）定义:由于冒泡机制，点击子元素一样会触发父元素的点击事件，可以将事件绑定目标元素的父元素上，利用冒泡机制触发该事件

2）因为事件是绑定在父元素上的。所以执行也是在父元素上执行。可以用e.target代替this可以获得实际点击的那个目标元素

优点：减少内存消耗，动态绑定事件

缺点：

1. 使用不当会造成事件在不应该触发时触发；

2、比如 focus、blur 之类的事件没有事件冒泡机制，所以无法实现事件委托

 <div id="box">

      <button>HTML</button>

      <button>CSS</button>

      <button>JS</button>