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来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- Apache 的常见问题
Apache "No services installed"问题的处理以及Apache提示 the requested operation has failed而无法启动 安装完 ...
- 使用Theos做一个简单的Mobile Substrate Tweak
01 January 2014 Mobile Substrate和Theos Mobile Substrate是Cydia的作者Jay Freeman (@saurik)的另外一个牛X的作品,也叫Cy ...
- Viewpager实现网络图片的轮播
//主意:里面用到了第三方的Xutils.jar包和Imageloader.jar包还用到了访问网络,所以要加网络权限 <uses-permission android:name="a ...
- AutoTile 自动拼接（一） 学习与实践
恩,大家好,这两天江苏冷空气袭击,下了今年 第一场第二场雪. 不过今天我要说的 ,和 上面的 屁关系都没有. 今天要说的是 2d无缝自动拼接.大家有没有玩过 RPG Maker VX Ace. 类似 ...
- hdu 1728 逃离迷宫 (BFS)
逃离迷宫 Time Limit : 1000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submissi ...
- LightOJ 1341 Aladdin and the Flying Carpet（整数拆分定理）
分析:题目并不难理解,就是一些细节上的优化需要我们注意,我在没有优化前跑了2000多MS,优化了一些细节后就是400多MS了,之前还TLE了好几次. 方法:将整数拆分为质因子以后,表达为这样的形式,e ...
- JavaScript 小技巧汇总
判断一个变量是否申明 if (typeof v === "undefined") { // ... } 判断一个变量是否是函数 function f() {} typeof f / ...
- springMVC简单的安全防御配置
1,使用 spring form 标签 防 csrf 攻击 2,标明请求方法:RequestMethod.GET,RequestMethod.POST, PATCH, POST, PUT, and D ...
- LDA,PCA阅读资料
1,线性判别分析(Linear Discriminant Analysis)(一) 2,机器学习中的数学(4)-线性判别分析(LDA), 主成分分析(PCA) 3,Machine Learning i ...
- 干货分享：MySQL之化险为夷的【钻石】抢购风暴【转载】
转自: 干货分享:MySQL之化险为夷的[钻石]抢购风暴 - Vanos_韩尛哲 - 博客园http://www.cnblogs.com/Vanos-lcp/p/5642097.html 抢购钻石不稀 ...