vue中事件冒泡規則和事件捕獲規則

<

div 
id>
<
div 
@click
="handleclickone"
>
<
p @click
="handleclicktwo"
>測試
p>
div>
div>
<
script 
src="./js/vue.js"
>
script
>
<
script
>
varvm 
=new
vue(,
methods: ,
handleclicktwo() }})
script
>

2.事件捕獲   是從 外 到內的,  先 父元素   後 子元素@click.capture

<

div 
id>
<
div 
@click.capture
="handleclickone"
>
<
p @click.capture
="handleclicktwo"
>測試
注釋: 課外拓展
3.  @click.self="handleclick"
點選 父元素內容才觸發點選事件,   點 子元素 無效,  有時候 需要這樣的功能

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>阻止冒泡點選事件的弊端
title
>
head
>
<
body
>
<
div 
id>
<
div 
@click.self
="handleclick"
>
我是父元素內容
<
p>我是子元素,點我沒用, 加了self
p>
div>
div>
<
script 
src="./js/vue.js"
>
script
>
<
script
>
varvm 
=new
vue(,
methods: }})
script
>
body
>
html
>
@click="handleclickone">

@click="handleclicktwo">測試p>
div>
div>
 
事件冒泡和事件捕獲
事件冒泡 事件物件沿dom樹向上傳播 事件捕獲 事件物件沿dom樹向下傳播 addeventlistener click function flase 引數預設為false 代表事件冒泡，引數為true代表事件捕獲 attachevent onclick function detachevent 沒...
事件捕獲和事件冒泡
如果乙個節點和它的乙個父節點都繫結了相同事件型別的 當事件觸發時哪個 會先執行?儘管網景和微軟的處理方式不一致,也不要太過擔心。netscape 4 支援事件捕捉 capturing 從頂層的父節點開始觸發事件,從外到內傳播。微軟則支援事件冒泡 bubbling 從最內層的節點開始觸發事件,逐級冒泡...
事件冒泡和事件捕獲
在js中，繫結的事件預設的執行時間是在冒泡階段執行，而非在捕獲階段 重要 這也是為什麼當父類和子類都繫結了某個事件，會先呼叫子類繫結的事件，後呼叫父類的事件。直接看下面例項 當點選id3元素時候，執行結果是 id2，id3，id1 解析 因為obj2與obj3繫結的方法在捕獲階段執行，obj1的事件...