onchange，onpropertychange，oninput键盘输入和js赋值时区别

最新推荐文章于 2022-09-04 15:27:56 发布

最新推荐文章于 2022-09-04 15:27:56 发布 · 314 阅读

文章标签：

#onchange #onpropertychange #oninput #js赋值

javascript 专栏收录该内容

48 篇文章

订阅专栏

本文详细对比了不同浏览器中onchange、onpropertychange及oninput事件的行为差异，特别是这些事件在键盘输入、JS赋值和失去焦点等场景下的触发条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中需要用到文本框中值改变时触发某个事件，第一反应就是onchange事件，但是测试发现如果是用js赋值的话，是不会触发onchange事件的，后来在网上找了一下，都说是在ie浏览器中可以用onpropertychange事件，在火狐中使用oninput事件。说是这两个事件是一个效果，很多人没测试就在那转载。哎……

接下来我把测试过的跟大家分享下。

onchange事件是在键盘输入，失去焦点时候如果值改变就触发该事件（ie和火狐效果一样）。

onchange事件用js赋值时不会触发。

在ie浏览器中（本人是ie8，别的ie版本没测试）。

onpropertychange只要值改变都会触发，无论是键盘输入还是js赋值改变都会触发

oninput在ie中无效。

在火狐浏览器中

onpropertychange在火狐中无效。

oninput键盘输入时，只要值改变就触发（不管是否已经失去焦点），onchange是失去焦点时才会触发。

oninput事件js赋值是不会触发该事件的

文采不行，大家将就看，能理解意思就行，呵呵。

接下来把测试代码分享给大家。

 <input type="text" id="test1" onchange="testChange();" />
 <input type="text" id="test2" onpropertychange="testOnpropertychange();"/>

<input type="text" id="test3" oninput="testOninput();"/>

 <input type="button" value="改变文本框值" onclick="changeText();">

function testChange(){
    	alert('cnange');
}
function testOnpropertychange(){
    	alert('onpropertychange');
}
function testOninput(){
    	alert('oninput');
}
function changeText(){
    	document.getElementById("test1").value='文本框值已经改变';
    	document.getElementById("test2").value='文本框值已经改变';
    	document.getElementById("test3").value='文本框值已经改变';
}

有什么不对的地方希望大家指正。