在本教程中，我们将学习模糊事件的用途和多个实例。
blur 事件是一个用javascript语言引入的浏览器本地事件。每个前端框架都会在框架本身中实现。
让我们来学习什么是模糊事件，这个事件是如何在vuejs应用程序中实现的。
其他版本可供选择：
当输入元素失去焦点时，BLur事件被触发。 它是一个DOM事件触发器。
blur事件`在以下元素中使用
单独的输入元素验证，例如，带有电子邮件的输入类型可以在元素失去焦点时有一个内联验证：
- 所有的输入元素
- 文本
- 文本区
- 选择
- 复选框
- 单选
让我们看一个例子：
<input v-on:blur="event handler function">
v-on 是一个内置的指令，用来监听事件v-on:blur ，这个函数在输入元素失去焦点时执行。
上面的内容也可以用速记语法来重写@event
<input @blur="event handler function">
Vuejs应用程序中的输入类型模糊事件示例
在下面的例子中：
- 应用程序模板包含要显示给用户的元素。
@blur event附加的事件处理程序是在javascript中声明的。- 函数处理程序被定义为有一个参数event
- 一个$event被传递给事件函数，用户输入的数据可以通过
event.target.value。 - 这有助于从视图模板到控制器javascript代码的数据绑定 这是一个
example for passing data from blur event in VueJS application
<template>
<div class="hello">
<h3>Vuejs Input Blur event example</h3>
<br />
<input type="name" placeholder="name" @blur="blurEventHandler($event)" />
<br />
</div>
</template>
<script>
export default {
name: "InputBlurExample",
data() {
return {
name: "",
};
},
methods: {
blurEventHandler: function (e) {
const name = e.target.value;
console.log(name);
},
},
};
</script>
<style scoped>
</style>
如何模糊事件和回车键
这是一个关于输入元素如何与模糊事件和回车键一起工作的例子。
输入键事件可以通过keyup.enter 事件处理程序进行跟踪。
<template>
<input id="email" v-on:blur="blurEvent('email')" v-on:keyup.enter="$event.target.blur()"
</template>
blurEvent在输入失去焦点或按下回车键时被调用。 我只是用console.log记录了输入的输出。 在某些情况下，这将是一个问题，在模糊和回车键期间调用两次，以避免这个问题，直接调用blur事件在keyup.enter event
<template>
<input id="email" v-on:blur="blurEvent('email')" v-on:keyup.enter="$event.target.blur()"
</template>
以下是在Vue组件中创建的一个事件处理函数。
<script>
export default {
name: "InputBlurExample",
data() {
return {
name: "",
};
},
methods: {
blurEvent: function (e) {
const email = e.target.value;
console.log(email);
},
},
};
</script>
总结
在这篇文章中，你学到了vuejs应用程序中基本的模糊事件的例子，以及模糊和按键事件的工作原理。
