vue--- 事件修饰符

vue的事件修饰符

这是我的一个自我总结，可能有些不足，还希望各位jym可以补充补充

1. 标签上面都是有自己的默认行为的，有的时候我们想要修改这个事件 的默认行为，就需要使用到事件修饰符来进行一个阻止，下面几个是我们常用的阻止默认行为的事件修饰符
2. 使用 js 的原生行为： event.preventDefault() 阻止元素发生的默认行为，例如：可以阻止 a标签的跳转行为

语法：event.preventDefault( ) ; even必需，规定阻止哪个事件的默认动作，这个even参数来自事件绑定函数
3. 使用vue的事件修饰符阻止默认行为

<a href.prevent="www.baidu.com" @click ="fun"> 百度

使用 .prevent 1阻止标签的默认行为

4. 一次事件，让此事件只会执行一次，第二次点击无效

使用 .once 使标签只可以点击一次，运行一次事件

5. 键盘事件修饰符

<input type="text" @keyup.13="change"> // 13表示的是输入为enter，起的keycode值是可以查询的

6. 时间修饰符--- 阻止冒泡

冒泡发生的情景：子元素和父元素都绑定了相同的事件，然后点击子元素，父元素也触发了该事件

（一）、使用js原生来阻止事件的冒泡

event.stopPropagation(); // 使用原生阻止事件冒泡

（二）、使用vue 修饰符阻止事件的冒泡

7. .capture 事件修饰符 的作用添加事件侦听器使用事件捕获模式(含义就是捕获)

给元素添加一个监听器，当元素发生冒泡的时候，先触发带有修饰符的元素，若此元素有多个修饰符，则由外而内触发

就是那个标签有该事件修饰符就先触发谁

下面是我们的代码演示

	<div @click="handleCatch("爷爷辈")">
    	<div @click="handleCatch("父亲辈")">
				<div @click="handleCatch("儿子辈")">
   		</div>
   </div>
  </div>	
</div>
// 像上面的代码，我们打印出来的是

儿子辈
父亲辈
爷爷辈
最外层

// 我们这个时候加上 .captrue 的修饰符 ，这个时候就是谁加上就先运行谁
<div @click.captrue="handleCatch("最外层")">
	<div @click="handleCatch("爷爷辈")">
    	<div @click="handleCatch("父亲辈")">
				<div @click.captrue="handleCatch("儿子辈")">
   		</div>
   </div>
  </div>	
</div>
//  这时候打印出来的结果是
最外层
儿子辈
父亲辈
爷爷辈

总结：
1. 冒泡是从里面向外面冒泡，捕获是从外面向里面捕获
2. 当捕获存在的时候，先从外面到里面进行捕获，没有被捕获的在从里面向外面进行冒泡

8. .self 与当前事件一致的时候触发

.self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发
冒泡冒上去的还是button对象，而不会变成div

上面的加上.self，show事件只会触发一次，外层的div不会被触发。

9. .passive : 事件的默认行为立即执行，无需等待事件回调执行完毕

在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

切记：.passive 和 .prevent 不能一起使用，因为一起使用的话 .prevent 会被忽略，同时浏览器会发出警告

10. .native 修饰符

让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

使用.native 修饰符来操作普通HTML标签会令事件失效的