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的事件的全兼容效果。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=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.oninput=function(){
count=count+1;
oshow.innerHTML=count;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt"/>
</body>
</html>
上述代码实现了全兼容效果，能够实时计算出输入文本框字符的数量。
二.触发时机：
对于change事件：
（1）.单行文本域与多行文本域，当修改它们的值后，并不能立即触发事件，而是焦点离开它们才能触发。
（2）.单行文本域与多行文本域修改前与修改后的值不能相同，否则不能触发。
对于input事件：
（1）.事件会同步触发，一旦值改变立即触发。
对于select下拉菜单、复选框和单选按钮等元素，只要它们的状态发生改变，两个事件都会触发，表现相同。
三.设置contenteditable为true的元素：
在HTML5之前，div等类似元素是不可编辑的，这几乎是定论。
但是在HTML5之后，一切都发生了改变。
只要为此类元素添加contenteditable属性（默认值为true），那么这些元素都变为可编辑的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#one,#two{
width:150px;
height:60px;
margin:5px;
background-color:#ccc;
}
</style>
<script>
window.onload=function(){
let count=0;
one.oninput=function(){
show.innerHTML=++count+"input";
}
two.onchange=function(){
show.innerHTML=++count+"change";
}
}
</script>
</head>
<body>
<div id="one" contenteditable></div>
<div id="two" contenteditable></div>
<div id="show"></div>
</body>
</html>
代码分析如下：
（1）.首先将两个div元素设置为可编辑状态。
（2）.然后两个div元素分别注册input与change事件。
（3）.当编辑div元素中内容的时候，input事件会同步触发，然而change事件不会触发。
特别说明：id属性值由于在文档中是唯一的，所以可以直接作为对应的元素对象使用。
相关阅读：
（1）.innerHTML属性可以参阅JavaScript innerHTML一章节。
（2）.contenteditable属性可以参阅HTML contenteditable 属性一章节。
input与change事件区别，这样的场景在实际项目中还是用的比较多的，关于input与change事件区别就介绍到这了。