事件绑定的形式有什么区别
@事件=‘函数名’
默认将事件对象作为参数传递给函数
@事件=‘函数名()’
不传递事件对象给函数
显示地传递事件对象必须使用$event
@事件=‘函数名($event)’ ;
@事件=‘函数名(参数1,2,3…,$event)’
获取事件对象的DOM元素
通过e.target获取
绑定键盘事件时,e.keyCode可以获取键盘符的编码
举例说明
页面写一个盒子,
以**@事件=‘函数名’**的形式绑定事件
<div class="son-box" @click="clickBox">盒子</div>
methods: {
clickBox(e){
console.log(e)//此时浏览器控制台打印出事件对象的信息
}
},
以这种形式绑定事件默认传递事件对象到函数中,这里通过e来接收
以**@事件=‘函数名()’**的形式绑定事件
<div class="son-box" @click="clickBox()">盒子</div>
methods: {
clickBox(e){
console.log(e)//此时浏览器控制台打印undefined
}
},
以这种形式绑定事件不会传递事件对象
显示地传递事件对象必须使用$event
注意只能是通过$event传递 (写错无法传递,另起别名无法传递)
<div class="son-box" @click="clickBox($event)">我是盒子</div>
可以携带额外的参数
<div class="son-box" @click="clickBox(1,2,$event)">我是盒子</div>
methods: {
clickBox(num1,num2,e){
console.log(e)//打印事件对象信息
console.log(num1+num2);//打印3
}
},
e.target 获取dom元素
<div class="son-box" @click="clickBox($event)">我是盒子</div>
methods: {
clickBox(e){
console.log(e.target )//打印<div class="son-box">
}
},