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来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- About struct in C
something new: to set value in struct can be in case i cannot view picture.. i write the snippet her ...
- selenium RC
http://blog.sina.com.cn/s/blog_68cb48770100v9c7.html http://www.cnblogs.com/hyddd/archive/2009/05/24 ...
- UVALive 2147 Push!!（队列实现DP）
就我的理解来说这个题,本质上是一个DP题,不应该说是搜索,因为我的做法是把表格中所有的数据都找到,使用队列暴力来遍历出所有状态,因为题目中的数据范围小,所有耗时也小. 首先分析箱子是一个被动物体,人是 ...
- map.entry<k,v>小用法（转）
你是否已经对每次从Map中取得关键字然后再取得相应的值感觉厌倦?使用Map.Entry类,你可以得到在同一时间得到所有的信息.标准的Map访问方法如下: Set keys = map.keySet( ...
- maven学习笔记 1
1 概述 1.1 Maven是什么 1.2 为什么要用Maven 2 怎么用Maven 2.1 Maven仓库 2.2 Maven安装 2.3 Eclipse插件 2.4 Maven常用命 ...
- loadrunner多负载机联合产生负载
解说一: 多机联合产生负载 LOADRUNNER 对应用程序施压时,采用的方法就是让一台机器模拟很多用户,同时向被 测用户发送请求或进行操作.这样,如果一台测试机器模拟的虚拟用户数过多,他本身性能的下 ...
- 表单提交中记得form表单放到table外面
帝国后台按栏目搜索文章时怎么都不生效 控制台查看原来是 栏目的select的值没有提交过去,原来由于form标签在table标签里面,导致js生成的<select>标签提交失败. 解决办 ...
- time_wait和clost_wait说明
在服务器的日常维护过程中,会经常用到下面的命令: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 它会显示例如 ...
- PHP的json_encode中文被转码的问题
在php5.2中做json_encode的时候.中文会被unicode编码, php5.3加入了options参数, 5.4以后才加入JSON_UNESCAPED_UNICODE,这个参数,不需要做e ...
- RSA非对称加密Java实现
原文 加密基础方法类 import java.security.MessageDigest; import sun.misc.BASE64Decoder; import sun.misc.BASE64 ...