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属性值由于在文档中是唯一的，所以可以直接作为对应的元素对象使用。
