html input change,input与change事件区别

input与change事件区别属于前端实例代码，有关更多实例代码大家可以查看。

关于标题中两个事件的具体用法可以参阅如下两篇文章：

(1).input事件参阅JavaScript input 事件一章节。

(2).change事件参阅JavaScript change 事件一章节。

两个事件非常类似，甚至对于某些元素它们两者的表现完全相同。

它们都可以在元素的值或者内容发生改变时触发，但区别也是非常明显。

区别主要表现的如下两点：

(1).浏览器兼容。

(2).事件触发的时机。

(3).事件生效元素。

下面分别做一下介绍，以便在特定的需求选取恰当的事件。

一.浏览器兼容性：

(1).change事件兼容所有主流浏览器。

(2).input事件被IE9+和其他标准浏览器支持。

特别说明：propertychange事件与input事件类似，可以实时触发，但是仅IE支持。

所以可以利用propertychange事件input的事件的全兼容效果。

代码实例如下：

犀牛前端部落

window.οnlοad=function(){

let otxt=document.getElementById("txt");

let oshow=document.getElementById("show");

let count=0;

if(document.all){

otxt.onpropertychange=function(){

count=count+1;

oshow.innerHTML=count;

}

}

else{

otxt.οninput=function(){

count=count+1;

oshow.innerHTML=count;

}

}

}

上述代码实现了全兼容效果，能够实时计算出输入文本框字符的数量。

二.触发时机：

对于change事件：

(1).单行文本域与多行文本域，当修改它们的值后，并不能立即触发事件，而是焦点离开它们才能触发。

(2).单行文本域与多行文本域修改前与修改后的值不能相同，否则不能触发。

对于input事件：

(1).事件会同步触发，一旦值改变立即触发。

对于select下拉菜单、复选框和单选按钮等元素，只要它们的状态发生改变，两个事件都会触发，表现相同。

三.设置contenteditable为true的元素：

在HTML5之前，div等类似元素是不可编辑的，这几乎是定论。

但是在HTML5之后，一切都发生了改变。

只要为此类元素添加contenteditable属性(默认值为true)，那么这些元素都变为可编辑的。

犀牛前端部落

#one,#two{

width:150px;

height:60px;

margin:5px;

background-color:#ccc;

}

window.οnlοad=function(){

let count=0;

one.οninput=function(){

show.innerHTML=++count+"input";

}

two.οnchange=function(){

show.innerHTML=++count+"change";

}

}

代码分析如下：

(1).首先将两个div元素设置为可编辑状态。

(2).然后两个div元素分别注册input与change事件。

(3).当编辑div元素中内容的时候，input事件会同步触发，然而change事件不会触发。

特别说明：id属性值由于在文档中是唯一的，所以可以直接作为对应的元素对象使用。

相关阅读：

(1).innerHTML属性可以参阅JavaScript innerHTML一章节。

(2).contenteditable属性可以参阅HTML contenteditable 属性一章节。