文档章节

JS中onpropertychange事件和onchange事件区别

钟小华
 钟小华
发布于 2011/04/28 14:41
字数 724
阅读 868
收藏 1

当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。  
也就是说:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变,只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时,可以考虑只用onblur。  

还有一点要注意到,当onblur和onchange事件一起用时,onblur会出问题。。。。详见如下  

测试页面:  

<html>  
<head> <title>通过js改变文本框中的值后触发的事件:onpropertychange事件 </title> </head>  
<body>  

<div id="test1">  
<b>测试onpropertychange事件和onchange事件一起用时: </b> <br>  
<font color="red">测试结果:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点后才触  

发,用js改变其值不触发 </font>  
<br>  
<input name="haha1" type="text" onpropertychange="alert('触发了onpropertychange事件!')" onchange="alert('触发了onchange事件!')" size="30" >  
<input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha1').value='js改变文本框后的值'">  
<br>  
<br>  
<br>  

<div id="test2">  
<b>测试只有onblur和onchange事件时: </b> <br>  
<font color="red">测试结果:onchange先触发,onblur后触发 </font>  
<br>  
<input name="haha2" type="text" onblur="alert('触发了onblur事件!')" onchange="alert('触发了onchange事件!')" size="30" >  
<input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha2').value='js改变文本框后的值'">  
<br>  
<div>  
<br>  
<br>  
<br>  


<div id="test3">  
<b>测试当onblur和onpropertychange事件一起用时: </b> <br>  
<font color="red">测试结果:onblur好象出了问题,只要用键盘在文本框中随便输入一个值,便会触发它。可能是onpropertychange把它惹毛了。。。^-^ </font>  
<br>  
<input name="haha3" type="text" onblur="alert('触发了onblur事件!')" onpropertychange="alert('触发了onpropertychange事件!')" size="30" >  
<input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha3').value='js改变文本框后的值'">  
<br>  
<div>  
<br>  
<br>  
<br>  


<div id="test4">  
<b>测试有onblur、onpropertychange事件和onchange事件一起用时: </b> <br>  
<font color="red">测试结果:onblur在和onpropertychange一起用时的问题仍然存在 </font>  
<br>  
<input name="haha4" type="text" onblur="alert('触发了onblur事件!')" onpropertychange="alert('触发了onpropertychange事件!')" onchange="alert('触发了  

onchange事件!')" size="30" >  
<input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改变文本框后的值'">  
<br>  
<div>  

</body>  
</html>

本文转载自:http://topic.csdn.net/u/20090505/14/3269c008-9f10-4cb9-8fd1-82306c2cc05e.html

钟小华
粉丝 6
博文 31
码字总数 1722
作品 0
江门
私信 提问
oninput,onpropertychange,onchange的用法和区别

1、前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchan...

ForingY
2015/11/05
33
0
change、propertychange 和 input 事件的区别

1. onchange 事件与 onpropertychange 事件的区别: onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发; onpropertychange 事件却是实时触发,即每增加或删除一个字符就...

科研者
2017/10/11
0
0
input标签内容改变的触发事件

onchange事件与onpropertychange事件的区别:   onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过j...

zchuanzhao
2016/01/12
153
0
input textarea监听鼠标粘贴

发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下: <!doctype html><html><head><meta charset="utf-8"><title>判断粘贴</title><script t......

subying
2014/01/10
2.2K
0
js input一个值改变时自动修改另一个input的值

就是使用 js input 值改变时自动修改其它input的值。网上答案我都试过了。不行。 因为我的是:点击输入框,弹出城市选择控件直接点击城市名就Ok。什么点击事件不行。 监听输入框值的即时变化...

markYun
2013/03/22
10.1K
6

没有更多内容

加载失败,请刷新页面

加载更多

009、Linux 文件权限管理

Linux 文件权限管理

北岩
25分钟前
5
0
Kafka学习笔记(三)—Kafka消息丢失,消费重复

一、数据传输事务的定义 最多一次(at most once):消息不会被重复发送,但是可能丢失 最少一次 (at least once)消息可能会被重复发送,但是不会漏发送 精确一次(exactly once) 不会少发...

Algoric
29分钟前
5
0
ajax设置请求头部时遇到的问题

w3c规定 当请求的header包含以下字段时 会被zhong'zhi Accept-Charset Accept-Encoding Connection Content-Length Cookie Cookie2 Content-Transfer-Encoding Date Expect Host Keep-Alive......

Bing309
53分钟前
5
0
总结:Linux

一、目录 目录 作用 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里。 /etc /home 存放所有用户文件的根目录,是用户主目录的基点,比如用户user的主目录就是/home/user,...

浮躁的码农
56分钟前
4
0
什么是 happens-before 原则?

Java 中 happens-before 原则,是在 JSR-133 中提出的。 原文摘要: • Each action in a thread happens-before every subsequent action in that thread. • An unlock on a monitor happe......

ConstXiong
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部