【JavaScript】——input元素的oninput事件和onchange事件

原创已于 2022-11-23 21:26:17 修改 · 1.6w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2022-11-21 09:29:29 首次发布

前端：JavaScript、Vue、Node、3D可视化等专栏收录该内容

36 篇文章

订阅专栏

本文详细解释了HTML中input和textarea元素的oninput和onchange事件的区别。oninput事件在输入时实时触发，适用于多种文本输入类型；而onchange事件则在输入框失焦时触发。此外还介绍了这两种事件的绑定方法及与其他类似事件的区别。

1.oninput事件是在输入框中输入时就会触发，该事件在<input>或<textarea>元素的值发送改变时触发。

2.onchange事件是在输入框输入完内容后，输入框失焦后触发。且onchange事件也可以作用于<keygen>和<select>元素。

input元素的oninput事件和onchange事件的区别：

oninput 事件适用于以下标签：

<input type=”password”>
<input type=”search”>
<input type=”text”> 
<textarea>

onchange事件适用于：

<input>
<keygen>
<select>

input元素上绑定事件的三种方式：

//第一种：直接在元素标签上添加oninput属性，属性值为处理事件函数的调用

<input type="text" id="input" oninput="handleInput()"></input>

function handleInput() {
	// 处理事件代码
}




//第二种：获取input元素，然后在元素对象上添加oninput属性，属性值为函数，函数内部为处理事件函数的调用

<input type="text" id="input"></input>

var inputEle = document.querySelector('#input')
inputEle.oninput = function() {
	handleInput()
}
function handleInput() {
	// 处理事件代码
}





第三种：获取input元素，然后在元素上利用事件监听添加input事件

<input type="text" id="input"></input>

var inputEle = document.querySelector('#input')
inputEle.addEventListener('input', handleInput)
function handleInput() {
	// 处理事件代码
}

汇总onchange onpropertychange 和oninput事件的差别：

1、onchange事件与onpropertychange事件的差别：
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每添加或删除一个字符就会触发。通过js改变也会触发该事件。可是该事件IE专有。

2、oninput事件与onpropertychange事件的差别：
oninput事件是IE之外的大多数浏览器支持的事件。在value改变时触发，实时的，即每添加或删除一个字符就会触发，然而通过js改变value时。却不会触发；onpropertychange事件是不论什么属性改变都会触发的，而oninput却仅仅在value改变时触发，oninput要通过addEventListener()来注冊，onpropertychange注冊方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）

3、oninput与onpropertychange失效的情况：
（1）oninput事件：a). 当脚本中改变value时。不会触发。b).从浏览器的自己主动下拉提示中选取时，不会触发。
（2）onpropertychange事件：当input设置为disable=true后。onpropertychange不会触发。

部分内容来自：

三者区别

oninput和onchange事件