前言

介绍了什么是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 输出按键名称。

Vue函数传参之event触发相关推荐

vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
事件绑定 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
vue路由传参，对参数值编码处理
vue路由传参: 问题: 很明显vue路由传参在没有任何处理的情况下,参数值会裸露在URL中,这并不是我们所希望的.但因为某些因素一定要用路由传参,最起码也要对这种裸露在URL中的参数值做个编码 Ja ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
函数传参涉及到副本的创建与拷贝问题分析
遇到一个问题,是这样的: b = [1, 2, 3]def aaa(b):b.append(4)def bbb(b):b = 5aaa(b) print(b) # [1, 2, 3, 4] bbb(b ...
2021-01-14python函数传参是传值还是传引用？参数若是简单类型是传值若是对象类型则是传引用，python是兼容两者传参方式的
python函数传参是传值还是传引用? 首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题. ...
函数传参字典_Python 函数参数解包
做一个简单.明亮.快乐的手艺人. 函数参数解包(Function Argument Unpacking)是在函数传参时将iterable参数对象中的元素解包出来的一种技术. 想象一个场景,当函数所有实 ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...

Vue函数传参之event触发

前言

场景