事件冒泡

事件冒泡

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。

原生js阻止事件冒泡

try{
        e.stopPropagation();//非IE浏览器
    }
    catch(e){
        window.event.cancelBubble = true;//IE浏览器
    }    

原生js阻止默认事件

if ( e && e.preventDefault ) {
            e.preventDefault()//非IE浏览器
} else { window.event.returnValue = false; } //IE浏览器

vue.js取消事件冒泡

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

vue.js阻止默认事件

<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

事件穿透（事件冒泡场景）

事件穿透：就是上面有一个元素，但我需要知道它挡住的下级的元素是什么，然后进行一些事件的处理。

场景一：

页面弹窗，弹窗上有一个确定或者关闭按钮,这时，如果下方有一个按钮，那你点击弹窗的时候，也会触发弹窗下层的按钮事件，vue提供的解决方法就是直接在click.stop

场景二：

设计非要把蒙层放在最上层，明明遮住了按钮，他不管，他就觉得这么放好看，那怎么办？好在前端足够强大，能够解决这个问题，就是css中的一个pointer-events

事件委托（事件冒泡场景）

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：

1、减少DOM操作，提高性能。

2、随时可以添加子元素，添加的子元素会自动有相应的处理事件。