事件冒泡和捕获

学习：https://www.cnblogs.com/gitByLegend/p/10492553.html

事件的绑定

dom事件的监听和触发都定义在EventTarget接口，所有节点都部署了这个接口，提供三个方法

• addEventListener 添加监听事件
• removeEventListener 移除监听事件
• dispatchEvent 触发监听事件

事件冒泡和捕获

• 事件冒泡：从target被触发，冒泡从里向外，直到document对象
• 事件捕获：从最外层document开始向内传播直到target节点
• 同时存在的时候，先捕获后冒泡，如果想反过来，可以让捕获事件延后执行

element.addEventListener(event, function, useCapture)

addEventListener有三个参数，event是被绑定的元素，function是触发时调用的函数，useCapture是冒泡捕获的配置项，默认为false，只进行冒泡。
第三个参数useCapture可以配置几个选项：capture，once，passive(监听函数不会调用事件的preventDefault，调用也会被忽略)

冒泡还是捕获？

当冒泡和捕获同时存在的时候，先捕获后冒泡，也就是说会先从document到target，再从target到document，遇到注册的事件就会被触发

• 对于currentTarget 非target节点来说，会先捕获后冒泡触发
• 对于target节点则会根据捕获冒泡函数注册的顺序进行触发

IE兼容性

ie9-通过attachEvent(event,function)来添加事件监听

　        //添加事件
            function addEvent(obj,type,fn){
                if(obj.addEventListener){
                    obj.addEventListener(type,fn,false);
                 }else{
                     obj.attachEvent("on"+type,fn);
                  }
           }
            //移除事件
             function romeveEvent(obj,type,fn){
               if(obj.removeEventListener){
                    obj.removeEventListener(type,fn)
                }else{
                    obj.detachEvent("on"+type,fn);
                 }
             }

事件委托

通过事件冒泡或者捕获实现事件委托减少代码，提高性能；对于之后添加的元素同样可以拥有事件。

var onUl = document.getSelectQuery('ul')
onUl.onclick = function(e){
     var event = e || event;
     if(event.nodeName.toLowerCase === 'li'){
        alert('li')
    }
}

阻止事件冒泡 IE(cancelBubble)

• stopPropagation() 阻止事件的传播，但是不会阻止target其他监听事件的触发
• stopImmidatePropagation() 阻止其他事件的触发和事件的传播

事件委托和vue的优化

学习：https://blog.csdn.net/saucxs/article/details/90612942

我们可以看到在vue当中是没有事件委托的，有两个原因，其一是事件委托主要是解决的问题之一，事件的注册和移除，已经被vue解决，直接写@click即可，第二个是即使写了很多事件，vue会把相同的事件抽离出来，这样其实回调函数都是一个，已经是最小的损耗，最后我们可以在v-for上进行类似事件委托的实现，只需要在方法中判断是针对哪个子元素的事件。
可以通过事件修饰符来进行冒泡事件的一些变更，比如
.stop 阻止事件冒泡和捕获； .self 判断target为自身才会触发； .prevent 阻止默认事件； once 只触发一次；.capture 捕获模式 .passive 会告诉浏览器你不想阻止事件的默认行为，默认事件会立即触发，提高性能。