Vue函数传参之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 输出按键名称。