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事件区别就介绍到这了。

回复

我来回复
  • 暂无回复内容