原生事件介绍
onInput Event
当一个 , , 或 元素的 value 被修改时，会触发 input 事件
onChange Event
当用户更改 、 和 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。
基于表单元素的类型和用户对元素的操作的不同，change 事件触发的时机也不同：
- 当 元素被选中或取消选中时（通过点击或使用键盘）；
- 当 元素被选中时（但不是取消选中时）；
- 当用户显式提交改变时（例如：通过鼠标点击了 中的一个下拉选项，通过 元素选择了一个日期，通过 元素上传了一个文件等）；
- 当标签的值被修改并且失去焦点后，但未提交时（例如：对、 text、search、url、tel、email 或 password 类型的 元素进行编辑后）。
onBlur Event
blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。
-
没有进行任何输入时，不会触发change
在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。 -
输入后值并没有发生变更
这种情况是指，在没有失焦的情况下，在输入框内进行返回的删除与输入操作，但最终的值与原值一样，这种情况下，keydown、input、keyup、blur都会触发，但change依旧不会触发。
React 中
onInput
onInput：一个 Event 处理函数。在用户更改值时立即触发。由于历史原因，在 React 中习惯于使用 onChange，工作方式类似。
onChange
onChange：一个 Event 处理函数。如果这是 受控输入框，则必须提供。在用户更改输入框的值时立即触发（例如，每次按键时触发）。行为类似于浏览器的 input 事件。
onBlur
onBlur：一个 FocusEvent 事件处理函数。当元素失去焦点时触发。与内置的浏览器 blur 不同，在 React 中，onBlur 事件会冒泡。
Vue中（类似原生事件）
<input type="text" v-model="inputValue" @change="handleChange" />
onInput
v-model 绑定事件onInput
剖析实现：
//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>
...
使用
<CustomInput
:model-value="searchText"
@update:model-value="newValue => searchText = newValue"
/>
等价于
<CustomInput v-model="searchText" />
onChange
@change 事件会在表单元素的值发生变化并失去焦点（通常是用户输入后按下回车键或点击其他地方）时触发。这与 @input 事件不同，后者会在每次输入时都触发。文章来源：https://www.toymoban.com/news/detail-759583.html
onblur
当元素失去焦点时触发文章来源地址https://www.toymoban.com/news/detail-759583.html
到了这里，关于input , change ,blur 事件的区别，以及在vue和react中的表现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
