input , change ,blur 事件的区别,以及在vue和react中的表现

原生事件介绍

onInput Event

当一个 , , 或 元素的 value 被修改时,会触发 input 事件

onChange Event

当用户更改 、 和 元素的值时,change 事件在这些元素上触发。和 input 事件不同的是,并不是每次元素的 value 改变时都会触发 change 事件。

基于表单元素的类型和用户对元素的操作的不同,change 事件触发的时机也不同:

  • 当 元素被选中或取消选中时(通过点击或使用键盘);
  • 当 元素被选中时(但不是取消选中时);
  • 当用户显式提交改变时(例如:通过鼠标点击了 中的一个下拉选项,通过 元素选择了一个日期,通过 元素上传了一个文件等);
  • 当标签的值被修改并且失去焦点后,但未提交时(例如:对、 text、search、url、tel、email 或 password 类型的 元素进行编辑后)。
onBlur Event

blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。

  1. 没有进行任何输入时,不会触发change

    在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。

  2. 输入后值并没有发生变更

    这种情况是指,在没有失焦的情况下,在输入框内进行返回的删除与输入操作,但最终的值与原值一样,这种情况下,keydown、input、keyup、blur都会触发,但change依旧不会触发。

React 中

onInput

onInput:一个 Event 处理函数。在用户更改值时立即触发。由于历史原因,在 React 中习惯于使用 onChange,工作方式类似。

onChange

onChange:一个 Event 处理函数。如果这是 受控输入框,则必须提供。在用户更改输入框的值时立即触发(例如,每次按键时触发)。行为类似于浏览器的 input 事件。

onBlur

onBlur:一个 FocusEvent 事件处理函数。当元素失去焦点时触发。与内置的浏览器 blur 不同,在 React 中,onBlur 事件会冒泡。

Vue中(类似原生事件)

js 复制代码
  <input type="text" v-model="inputValue" @change="handleChange" />
onInput

v-model 绑定事件onInput

剖析实现:

js 复制代码
//CustomInput
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
</template>

<script setup lang=ts>
const props=defineProps(['modelValue'])
const emit=defineEmits(['update:modelValue'])

const {modelValue}=toRefs(props)
</script>
...

使用

js 复制代码
<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

等价于

<CustomInput v-model="searchText" />
onChange

@change 事件会在表单元素的值发生变化并失去焦点(通常是用户输入后按下回车键或点击其他地方)时触发。这与 @input 事件不同,后者会在每次输入时都触发。

onblur

当元素失去焦点时触发

相关推荐
你的人类朋友1 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程2 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白2 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
islandzzzz3 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar3 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜3 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
阿芯爱编程5 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试
烛阴5 小时前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
拉不动的猪6 小时前
JQ常规面试题
前端·javascript·面试