原生事件介紹
onInput Event
當(dāng)一個(gè) , , 或 元素的 value 被修改時(shí)，會觸發(fā) input 事件
onChange Event
當(dāng)用戶更改 、 和 元素的值時(shí)，change 事件在這些元素上觸發(fā)。和 input 事件不同的是，并不是每次元素的 value 改變時(shí)都會觸發(fā) change 事件。
基于表單元素的類型和用戶對元素的操作的不同，change 事件觸發(fā)的時(shí)機(jī)也不同：
- 當(dāng) 元素被選中或取消選中時(shí)（通過點(diǎn)擊或使用鍵盤）；
- 當(dāng) 元素被選中時(shí)（但不是取消選中時(shí)）；
- 當(dāng)用戶顯式提交改變時(shí)（例如：通過鼠標(biāo)點(diǎn)擊了 中的一個(gè)下拉選項(xiàng)，通過 元素選擇了一個(gè)日期，通過 元素上傳了一個(gè)文件等）；
- 當(dāng)標(biāo)簽的值被修改并且失去焦點(diǎn)后，但未提交時(shí)（例如：對、 text、search、url、tel、email 或 password 類型的 元素進(jìn)行編輯后）。
onBlur Event
blur與change事件在絕大部分的情況下表現(xiàn)都非常相似，輸入結(jié)束后，離開輸入框，會先后觸發(fā)change與blur，唯有兩點(diǎn)例外。
-
沒有進(jìn)行任何輸入時(shí)，不會觸發(fā)change
在這種情況下，輸入框并不會觸發(fā)change事件，但一定會觸發(fā)blur事件。在判斷表單的修改狀態(tài)時(shí)，這種差異會非常有用，通過change事件能輕易地找到哪些字段發(fā)生了變更以及其值的變更軌跡。 -
輸入后值并沒有發(fā)生變更
這種情況是指，在沒有失焦的情況下，在輸入框內(nèi)進(jìn)行返回的刪除與輸入操作，但最終的值與原值一樣，這種情況下，keydown、input、keyup、blur都會觸發(fā)，但change依舊不會觸發(fā)。
React 中
onInput
onInput：一個(gè) Event 處理函數(shù)。在用戶更改值時(shí)立即觸發(fā)。由于歷史原因，在 React 中習(xí)慣于使用 onChange，工作方式類似。
onChange
onChange：一個(gè) Event 處理函數(shù)。如果這是 受控輸入框，則必須提供。在用戶更改輸入框的值時(shí)立即觸發(fā)（例如，每次按鍵時(shí)觸發(fā)）。行為類似于瀏覽器的 input 事件。
onBlur
onBlur：一個(gè) FocusEvent 事件處理函數(shù)。當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。與內(nèi)置的瀏覽器 blur 不同，在 React 中，onBlur 事件會冒泡。
Vue中（類似原生事件）
<input type="text" v-model="inputValue" @change="handleChange" />
onInput
v-model 綁定事件onInput
剖析實(shí)現(xiàn)：
//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"
/>
等價(jià)于
<CustomInput v-model="searchText" />
onChange
@change 事件會在表單元素的值發(fā)生變化并失去焦點(diǎn)（通常是用戶輸入后按下回車鍵或點(diǎn)擊其他地方）時(shí)觸發(fā)。這與 @input 事件不同，后者會在每次輸入時(shí)都觸發(fā)。文章來源：http://www.zghlxwxcb.cn/news/detail-759583.html
onblur
當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)文章來源地址http://www.zghlxwxcb.cn/news/detail-759583.html
到了這里，關(guān)于input , change ,blur 事件的區(qū)別，以及在vue和react中的表現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
