vue(一)--监听事件

1.vue-on:监听事件：

demo:点击按钮，number+1

v-on 还可以缩写为 @

 

 

2.事件修饰符

• .stop：等同于javascript中的event.stoppropagation()，阻止冒泡（通俗讲就是阻止事件向上级dom元素传递）
• .prevent：等同于javascript中的event.preventdefault()， 默认事件指对dom的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。
• .capture：与事件冒泡的方向相反，事件捕获由外到内
• .self：只会触发自己范围内的事件，不包含子元素
• .once：只会触发一次

事件冒泡？

　　即是：父元素里有 子元素， 如果点击了 子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。

 

 

使用事件修饰符解决冒泡： 

1.   .stop阻止冒泡（通俗讲就是阻止事件向上级dom元素传递）

在me上的click后面加一个 .stop， 那么冒泡到了这里就结束了，就不会冒到father上面去了。
<div id="me" v-on:click.stop="doc">

 

 2.   .prevent  阻止页面刷新

 只有超链和form这种会导致页面刷新的操作，.prevent 才有用。 普通的不导致页面刷新的按钮，加上这个没有任何变化。

demo:点击超链接和form不跳转网页：

 

 

3.    优先触发 .capture

在father 上增加一个.capture  　　　　<div id="father" v-on:click.capture="doc">

那么当冒泡发生的时候，就会优先让father捕捉事件。点击son或者me的时候，都会优先触发它，当点击grandfather时并不会被father捕捉，只会弹出grandfather

 

 

4.   .self

<div id="father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生。

点击son:  son---->me-->grandfather

点击me:   me---->grandfather

点击father ： father---》grandfather

 

 

5.      .once

<div id="father" v-on:click.once="doc">
这样father点击一次之后，就不会再监听到click了

点击son:  son---me--father--grandfather

点击me:   me--grandfather

点击father： grandfather

点击grandfather：grandfather