浅谈事件冒泡及Vue的事件修饰符

事件阶段

一般来讲，某个元素触发事件后，会经历三个阶段：事件捕获阶段、事件目标阶段和事件冒泡阶段。

• 事件捕获：事件从DOM文档根元素开始逐层向下传递，直至找到事件目标。传递规则：document -> … -> div(middle) -> … -> div(事件目标)
• 事件目标：找到事件目标，并触发相应的事件
• 事件冒泡：从事件目标逐层传递，直至DOM文档根元素。传递规则：div(事件目标) -> … -> div(middile) -> …> document。传递期间，如果其他元素也注册了同类事件，则会依次触发响应。

Vue中事件修饰符

这里介绍几种修饰符：.stop、.capture、.prevent、.self、.once

• .stop：阻止当前元素以上的所有元素冒泡，如：

	<div class='outer' @click='outerClick'>
	    <div class="inner" @click.stop='innerClick'>
	        <input type="button" value='点我' @click='inputClick'>
	    </div>
    </div>

• .capture：当前元素最先冒泡，其他元素继续按照冒泡规则进行响应

	<div class='outer' @click='outerClick'>
	    <div class="inner" @click.capture='innerClick'>
	        <input type="button" value='点我' @click='inputClick'>
	    </div>
	</div>

• prevent：阻止当前元素的默认行为

	<div class='outer' @click='outerClick'>
         <div class="inner" @click='innerClick'>
             <input type="button" value='点我' @click='inputClick'>
             <a href='http://www.baidu.com' @click.prevent='aClick'>跳转到百度</a>
         </div>
     </div

• self：阻止当前元素的冒泡，但不会阻止目标元素的响应

	<div class='outer' @click='outerClick'>
	    <div class="inner" @click.self='innerClick'>
	        <input type="button" value='点我' @click.self='inputClick'>
	    </div>
	</div>

• once：当前元素只会冒泡一次

	<div class='outer' @click='outerClick'>
	    <div class="inner" @click='innerClick'>
	        <input type="button" value='点我' @click.once='inputClick'>
	    </div>
	</div>