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来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- Loadrunner VuGen实战---基本组成、录制流程、协议、脚本优化、参数化（三）
一.3大基本组件:VuGen.Controller.Analysis 1.VuGen:录制.编写脚本. 2.Controller:性能测试场景设计以及监控的地方. 3.Analysis:生成图表报告的 ...
- [转]ubuntu的which、whereis、locate和find命令
which 只能寻找执行文件 ,并在PATH变量里面寻找. whereis 从linux文件数据库(/var/lib/slocate/slocate.db)寻找,所以有可能找到刚刚删除,或者没有发现 ...
- Linux环境下Android JNI程序的编译
尊重原创作者,转载请注明出处: http://blog.csdn.net/gemmem/article/details/8993493 在android开发中,有时候需要编写一些C/C++代码,这时候 ...
- lucene的多种搜索2-SpanQuery
SpanQuery按照词在文章中的距离或者查询几个相邻词的查询 SpanQuery包括以下几种: SpanTermQuery:词距查询的基础,结果和TermQuery相似,只不过是增加了查询结果中单词 ...
- 移动端touch点穿（穿透）解决办法
回答一 穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟或者事件冒泡导致. 移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zep ...
- Entity Framework 学习初级篇7--基本操作：增加、更新、删除、事务
本节,直接写通过代码来学习.这些基本操作都比较简单,与这些基本操作相关的内容在之前的1至6节基本介绍完毕. l 增加: 方法1:使用AddToXXX(xxx)方法:实例代码如下: ...
- Redis 从数据库配置
通过持久化功能,Redis保证了即使在服务器重启的情况下也不会损失(或少量损失)数据.但是由于数据是存储在一台服务器上的,如果这台服务器的硬盘出现故障,也会导致数据丢失.为了避免单点故障,我们希望将数 ...
- Vold工作流程分析学习
一 Vold工作机制分析 vold进程:管理和控制Android平台外部存储设备,包括SD插拨.挂载.卸载.格式化等: vold进程接收来自内核的外部设备消息. Vold框架图如下: Vold接收来自 ...
- SD卡的SPI模式的初始化顺序（转）
为了使SD卡初始化进入SPI模式,我们需要使用的命令有3个:CMD0,ACMD41,CMD55(使用ACMD类的指令前应先发CMD55,CMD55起到一个切换到ACMD类命令的作用). 为什么在使用C ...
- angularJS在创建指令需要注意的问题(指令中使用ngRepeat)
现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...