欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue(一)--监听事件

程序员文章站 2022-07-04 22:26:47
1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @ 2.事件修饰符 .stop:等同于JavaScript中的event.stopPropagation(),阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) .prevent:等同于JavaScript中 ......

1.vue-on:监听事件:

demo:点击按钮,number+1

v-on 还可以缩写为 @

vue(一)--监听事件

vue(一)--监听事件

 

 

2.事件修饰符

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

事件冒泡?

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

 vue(一)--监听事件

 

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

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

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

vue(一)--监听事件

 

 2.   .prevent  阻止页面刷新

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

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

vue(一)--监听事件

 

 

3.    优先触发 .capture

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

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

vue(一)--监听事件

 

 

4.   .self

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

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

点击me:   me---->grandfather

点击father : father---》grandfather

vue(一)--监听事件

 

 

5.      .once

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

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

点击me:   me--grandfather

点击father: grandfather

点击grandfather:grandfather

vue(一)--监听事件