onchange、oninput、onpropertyChange事件的异同
onchange事件适用于input\textarea\select元素上，支持各大浏览器，该事件只有在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；
oninput事件适用于input\textarea\select元素，支持出IE外各大浏览器，该事件只有在键盘或者鼠标操作改变对象属性，只要属性发生变化就会触发事件，无需失去焦点。脚本触发无效；
onpropertychange属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的。
可通过下面的方法进行测试，看效果：
<!DOCTYPE html>
<html>
<head>
<!-- redirect to the root krpano.html to avoid local browser restrictions -->
<meta charset="utf-8"/>
<title>input</title>
</head>
<body>
<input type="text" id="text" onchange="textChange()" onpropertychange="aa()">
<input type="date" id="date">
<input type="color" id="color" oninput="conColor()">
<input type="search">
<select id="select" oninput="selectChange()">
<option></option>
<option></option>
</select>
<textarea onchange="textareaChange()">wmen fjowgjksdjgsjlh;ruyssmngjshtuskgnvisysanhdi dhiynsgid是央视非得让公司和覅三个我们一起；AOI</textarea>
<script type="text/javascript">
window.onload=function(){
var text=document.getElementById("text");
text.value="";
}
function aa(){
var text=document.getElementById("text");
console.log(text.value);
}
function conColor(){
var color=document.getElementById("color");
console.log(color.value);
}
function textChange(){
var text=document.getElementById("text");
console.log(text.value);
}
function selectChange(){
var select=document.getElementById("select");
console.log(select.value);
}
function textareaChange(){
var textarea=document.getElementById("textarea");
console.log(textarea.text);
}
</script>
</body>
</html>
onchange、oninput、onpropertyChange事件的异同的更多相关文章
- 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码
总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- 总结oninput、onchange与onpropertychange事件的用法和区别，onchange
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 总结oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 总结oninput、onchange与onpropertychange事件的使用方法和差别
onchange事件仅仅在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上 ...
- 【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- 使用devcon禁用启用网卡
系统平台:win2003 情况描述: 机器上装有两块网卡,8136和8139,网卡A使用静态IP,连接内部办公网,网卡B使用DHCP,连接互联网.切换两个网络时,需要先禁用一个网卡,启用另一个网卡.来 ...
- AI 人工智能 探索 （七）
我简单画了一幅图,来讲下 ai 中的设计模式.图形中的这些人物,我想大家都能看的明白. 当 盗贼出现,人们发现了他们,就 呼叫 主类,然后主类再 通知 下面对应的管理局,然后管理局再 分配人手过去 ...
- cocos2d-x-2.2.6创建工程
1.下载并安装Python,我的版本是2.7.3,不要太高,据说不能用.2.配置环境变量,将Python的安装的根目录加入系统环境变量的Path路径中(不赘述,自行配置)3.配置好之后打开cmd命令行 ...
- 2015十大顶级开源ERP系统点评
如今,企业资源规划(ERP)和客户关系管理(CRM)系统的必要性已经被各种组织和企业所认可:ERP和CRM能够直接为企业的业务效率和利润做出贡献. 但是随着今天企业商业形态的日趋多样化,互联网新经济的 ...
- 代码异味---Code smell
程序员应该竭尽全力去写那些重复的代码.以下几点是我目前最需要改进的地方. 重复代码: 相同或者相似的代码存在于一个以上的地方. 长方法: 一个非常长的方法.函数或者过程. 巨类: 一个非常庞大的类. ...
- SQL Server 索引维护sql语句
使用以下脚本查看数据库索引碎片的大小情况: 复制代码代码如下: DBCC SHOWCONTIG WITH FAST, TABLERESULTS, ALL_INDEXES, NO_INFOMSGS 以 ...
- 在安装mysqli的时候，出现error: ext/mysqlnd/mysql_float_to_double.h: No such file or direc
这个属于路径问题 我直接修改mysqli_api.h文件 # vim mysqli_api.h把第36行的#include "ext/mysqlnd/mysql_float_to_doubl ...
- C++ Builder string相互转换(转)
源:http://www.cnblogs.com/zhcncn/archive/2013/05/20/3089084.html 1. char*->string (1)直接转换 const ch ...
- 配置snort
0.如果要输出到mysql,请安装barnyard2 在此之前,请启动并配置mysql git clone https://github.com/firnsy/barnyard2 cd barnyar ...
- 在Gridview编辑时添加DropDownList控件并设置默认值
页面代码: <asp:GridView ID="GridView1" runat="server" AutoGenerateCol ...