Vue中事件修饰符与键盘事件
事件修饰符
Vue中的事件修饰符:
1、prevent:阻止默认事件;
2、stop:阻止事件冒泡;
3、once:事件只触发一次;
4、capture:使用事件的捕获模式;
5、self:只有event.target是当前操作的元素时才触发事件;(只有和当前事件触发的标签一致时才会触发)
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕prevent:阻止默认事件
点完之后不会发生默认事件 点击去百度
点完超链接不会发生跳转,因为prevent阻止了a标签的默认事件(跳转)stop:阻止事件冒泡
p和button都有show事件,当点击按钮时,button会触发show,执行完成后,冒泡到外层,p的show也会触发,加上了stop,阻止了button的冒泡,所以p不会触发show事件。 capture:使用事件的捕获模式 p1 p2
正常情况下是先进行事件的捕获,这个过程是有外到内的,捕获完成后,该事件触发,在冒泡到外层。
没加capture时,点击p2,会打印出2 1,这个是冒泡产生的结果
加上capture后
self:与当前事件一致时触发
.self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发
冒泡冒上去的还是button对象,而不会变成p
上面的加上.self,show事件只会触发一次,层的p不会被触发。passive:事件的默认行为立即执行
passive立即执行,不会等到回调函数执行完毕才执行,默认情况是回调函数执行完后才会执行事件的行为。 1 2 3