js input的onblur与onchange的区别
时间:2015-11-14
onblur:只要input失去焦点就会触发 onblur事件。不管input框里面的值是否改变,都会触发事件。onchange:只有当input框里面的值发生变化才会执行,这里加了值判断 。
onblur:只要input失去焦点就会触发 onblur事件。不管input框里面的值是否改变,都会触发事件。onchange:只有当input框里面的值发生变化才会执行,这里加了值判断 。
请看下面实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<script type="text/javascript">
function init(){
function testChange(){
this.value=this.value.toUpperCase();
document.getElementById("onchangeDiv").innerHTML=Number(document.getElementById("onchangeDiv").innerHTML)+1;
}
function testblur(){
this.value=this.value.toUpperCase();
document.getElementById("onblurDiv").innerHTML=Number(document.getElementById("onblurDiv").innerHTML)+1;
}
var input1=document.getElementById("input1");
var input2=document.getElementById("input2");
input1.onchange=testChange;
input2.onblur=testblur;
}
window.onload=init;
</script>
</head>
<body>
<p>触发onchange <span id="onchangeDiv">0</span>次</p>
<p>触发onblur <span id="onblurDiv">0</span>次</p>
<input type="text" id="input1" value="test change"/><br/>
<input type="text" id="input2" value="test blur"/>
</body>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jQuery限制复选框checkbox的选中次数
- jQuery点击切换增加和删除class类
- Vue使用props和emit父子组件通信
- 听说Mysql你很豪横?-------------呕心沥血深入解析mysql备份与恢复!!!
- 排障集锦:九九八十一难之第十难!mysq备份恢复,Could not read entry at offset *: Error in log format or read error.
- Vue使用ref父子组件通信
- 听说Mysql你很豪横?-------------MySQL5.7主从同步
- 听说Mysql你很豪横?-------------MySQL5.7主从复制!读写分离!
- Vue兄弟组件传值
- Vue设置浏览器的标题title和图标icon
- VantUI封装自定义Tabbar路由跳转
- 听说Mysql你很豪横?-------------分分钟带你玩转SQL高级查询语句(常用查询,正则表达式,运算符)
- jQuery实现点击添加样式同胞移除样式
- 微信小程序生命周期
- 听说Mysql你很豪横?-------------分分钟带你玩转SQL高级查询语句(库函数,存储过程)