当一个HTML元素的属性用js改变的时候，都能通过onpropertychange来捕获。例如一个文本text对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。
 
 
也就是说：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时，可以考虑只用onblur。 
还有一点要注意到，当onblur和onchange事件一起用时，onblur会出问题。。。。详见如下 
测试页面：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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>

JS中onpropertychange和onchange事件区别小结的更多相关文章

  1. js中各种跨域问题实战小结（二）

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  2. js中各种跨域问题实战小结（一）

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  3. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  4. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  5. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  6. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  7. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  8. js中的点击事件（click）的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

随机推荐

  1. [示例]NSDictionary编程题-字典的排序应用(iOS7班)

    代码: #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepo ...

  2. 转: HTTP协议的头信息详解

    通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.这两种类型的消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可 选的消息体组成.HTTP的头域包括通用头,请求头,响 ...

  3. ioinc

    ioinc setup sassnpm installionic serve cordova plugin add cordova-plugin-crosswalk-webview 十.开发流程 1. ...

  4. include指令和<jsp:include>标准动作

    利用JSP的包含机制,可以有效的避免重复,把可重用的部分独立出去,使用include把它们包含到当前文件.JSP有两种包含机制:include指令和<jsp:include>标准动作. 1 ...

  5. 从协议VersionedProtocol开始1

    Phase 0: Make a plan You must first decide what steps you're going to have in your process. It sound ...

  6. as3资源加载-Loader和URLLoader

    ⊙ Loader:只能加载SWF和图像.⊙ URLLoader:除了能加载swf和图像,还可以加载二进制文件(txt , xml , swc , ........). ================ ...

  7. java基础之 集合

    一.ArrayList和Linkedlist的区别 1.ArrayList是基于数组,LinkedList基于链表实现. 对ArrayList和LinkedList而言,在列表末尾增加一个元素所花的开 ...

  8. cpio的简单使用

    有如下文件 # file boot.kylin boot.kylin: ASCII cpio archive (SVR4 with no CRC) extract: # cpio -i <boo ...

  9. Power Point已经检测到你的显卡可能无法正确配置

    Microsoft PowerPoint打开ppt时提示信息 PowerPoint已检测到你的显卡可能无法正确配置最佳的幻灯片播放体验(“Power Point has detected that y ...

  10. TPLink 备份文件bin文件解析

    TPLink 路由器备份文件bin文件 测试路由器 WR885,备份文件加密方式DES,密钥:478DA50BF9E3D2CF linux端: openssl enc -d -des-ecb -nop ...