Vue函数传参之event触发
介绍了什么是event,通过案例将html的event传递给处理该event的函数中。在elementUI中,经常能看到回调参数的类型为Event。
·
前言
介绍了什么是event,通过案例将html的event传递给处理该event的函数中。
在elementUI中,经常能看到回调参数的类型为Event。如以下场景:
场景
我写一个输入框,当输入框一旦失去焦点,立刻将输入框中内容,传递给vue 的methods中进行处理。
解决方案:
编写前端代码:
<el-input @blur="handleInnerUpd" v-model="innerText" placeholder="请输入内容"></el-input>
特别注意这里不能写小括号!比如这样:@blur="handleInnerUpd(event)"
,这样绝对无法识别。
在JS中接收该event:
data: {
innerText:'',
},
methods: {
handleInnerUpd(event) {
console.log(`失去焦点了,输入框的内容值为:${event.target.value}`);
}
}
效果:
传递包括event的多个参数:
利用$event
handleInnerUpd(a,b,$event)
补充知识:什么是event
JS的event对象:
https://blog.csdn.net/lhjuejiang/article/details/79455801
event是一个内置的全局对象,我们看看里面有什么:
<button onclick="func1(event)">按钮</button>
function func1(event) {
console.log("我是个函数")
console.log(event.target)
}
上面的代码调用了func1,并且传入了全局的event,下面来看event的属性:
事件冒泡
https://blog.csdn.net/litong149/article/details/82560712
event的常用姿势:
event.target.value
最为常用,就是上面例子获取输入框框里面的值
event.preventDefault()
它可以阻止默认事件的发生。比如<a>
标签,其默认事件是跳转。如果我们想阻止单击超链接的跳转,可以这么玩儿:
<a href="https://www.baidu.com" onclick="func0(event)">超链接</a>
function func0(event) {
event.preventDefault()
}
此时打开控制台:
event的 defaultPrevent属性默认为false的,现在是true了。现在单击超链接将不会跳转
event.keyCode
顾名思义,这是配合按键事件使用的。它可以得到按键码。
event.key 输出按键名称。
更多推荐
已为社区贡献2条内容
所有评论(0)