事件修饰符
按键修饰符
可以使用按键码和按键的别名
- q,w,e,r…
- enter tab delete(捕获删除或者退格键) esc space up down left right
- ctrl alt shift meta
js中的按键事件 : keyup ,在不加修饰符的情况下,不管按哪个键都会触发,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 随便按哪个按键都会触发 keyup事件 -->
<input type="text" @keyup="show($event)">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
show(e){
console.log(e);
}
},
});
</script>
</html>
我这边输的是qwe,结果如图:
下面为大家例举加了修饰符的按键事件,代码如下:
<input type="text" @keyup.a="show($event)">
结果如图:
我按了很多,但是只有a是生效的。
还可以用字符编码,如下:
<input type="text" @keyup.65="show($event)">
修饰符也可以一起使用多个,如下:
<!-- 修饰符可以多个使用,为或者的关系 -->
<span>多个修饰符:</span>
<input type="text" @keyup.a.b.f="show($event)">
结果如图:
但是也有特殊的是并且的关系,举个例子如下:
<!-- 并且的关系的修饰符 ctrl shift-->
<span>多个修饰符:</span>
<input type="text" @keyup.ctrl.c="show($event)">
功能修饰符
举例说明(click事件),一般情况如下代码:
<body>
<div id="app">
<div class="div1" @click="print('div1')">div1
<div class="div2" @click="print('div2')">div2
<div class="div3" @click="print('div3')">div3
<div class="div4" @click="print('div4')">
div4
</div>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
show(e){
console.log(e);
},
print(e){
console.log(e);
}
},
});
</script>
- 点击div1输出:div1
- 点击div2输出:div2 div1
- 点击div3输出:div3 div2 div1
- 点击div4输出:div4 div3 div2 div1
上述就是典型的事件冒泡:当一个元素上的事件被触发时,事件从事件源开始,往上冒泡直到页面的根元素,这一过程称为事件冒泡(默认方式)
下面为大家描述事件捕获(capture修饰符):当一个元素上的事件被触发时,事件从页面的根元素开始,往下直到事件目标元素,这一过程称为事件捕获,代码如下:
<div class="div1" @click.capture="print('div1')">div1
<div class="div2" @click.capture="print('div2')">div2
<div class="div3" @click.capture="print('div3')">div3
<div class="div4" @click.capture="print('div4')">div4</div>
</div>
</div>
</div>
- 点击div1输出:div1
- 点击div2输出:div1 div2
- 点击div3输出:div1 div2 div3
- 点击div4输出:div1 div2 div3 div4
修饰符 | 含义 |
---|---|
capture | 添加事件监听器时使用事件捕获模式 |
stop | 阻止事件传播,调用 event.stopPropagation() |
self | 只当事件是元素本身触发时才执行回调,即不是事件传播引起的 |
prevent | 阻止事件的默认行为,调用 event.preventDefault() |
once | 事件只触发一次 |
通过表格的内容,可以看出要想阻止事件的传递可以用stop修饰符,如果只是想触发本身可以使用self修饰符,大家可以自己练习下。
下面再说下事件代理/事件委托
首先大家心里要明白,为什么要用代理/委托,原理是什么?
- 原理:利用事件冒泡机制,通过给父元素绑定事件,从而实现对所有子元素的事件管理,无需为每个子元素绑定事件
- 使用的原因/好处:减少事件注册,降低内存占用,新增元素时实现动态绑定事件
<body>
<div id="app">
<ul @click="doLi($event)">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
doLi(e){
console.log(e.target); // 事件代理时target为触发事件的dom对象,即子元素li,而非父元素ul
}
},
});
</script>