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

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>通过js改变文本框中的值后触发的事件：onpropertychange事件 </title> </head>
  5. <body>
  6. <div id="test1">
  7. <b>测试onpropertychange事件和onchange事件一起用时： </b> <br>
  8. <font color="red">测试结果：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点后才触
  9. 发，用js改变其值不触发 </font>
  10. <br>
  11. <input name="haha1" type="text" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了onchange事件！')" size="30" >
  12. <input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha1').value='js改变文本框后的值'">
  13. <br><br>
  14. <br>
  15. <div id="test2">
  16. <b>测试只有onblur和onchange事件时： </b> <br>
  17. <font color="red">测试结果：onchange先触发，onblur后触发 </font>
  18. <br>
  19. <input name="haha2" type="text" onblur="alert('触发了onblur事件！')" onchange="alert('触发了onchange事件！')" size="30" >
  20. <input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha2').value='js改变文本框后的值'">
  21. <br>
  22. <div>
  23. <br><br>
  24. <br>
  25. <div id="test3">
  26. <b>测试当onblur和onpropertychange事件一起用时： </b> <br>
  27. <font color="red">测试结果：onblur好象出了问题，只要用键盘在文本框中随便输入一个值，便会触发它。可能是onpropertychange把它惹毛了。。。^-^ </font>
  28. <br>
  29. <input name="haha3" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" size="30" >
  30. <input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha3').value='js改变文本框后的值'">
  31. <br>
  32. <div>
  33. <br><br>
  34. <br>
  35. <div id="test4">
  36. <b>测试有onblur、onpropertychange事件和onchange事件一起用时： </b> <br>
  37. <font color="red">测试结果：onblur在和onpropertychange一起用时的问题仍然存在 </font>
  38. <br>
  39. <input name="haha4" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了
  40. onchange事件！')" size="30" >
  41. <input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改变文本框后的值'">
  42. <br>
  43. <div>
  44. </body>
  45. </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. myeclipse9.x,10.x 安装时出现pulse-one-64,failed to load the JNI shared library

  2. elasticsearch插件之一：bigdesk

    bigdesk是elasticsearch的一个集群监控工具,可以通过它来查看es集群的各种状态,如:cpu.内存使用情况,索引数据.搜索情况,http连接数等. 可用项目git地址:https:// ...

  3. 都是以父元素的width为参照物的

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  4. win7 MS SQL SERVER 2000安装

    http://blog.chinaunix.net/uid-24398518-id-2156226.html MicrosoftInternetExplorer402DocumentNotSpecif ...

  5. 关于java.lang.reflect.InvocationTargetException

    今天遇到java.lang.reflect.InvocationTargetException错误,卡了好一会儿,报错代码 try { Class<?> c= Class.forName( ...

  6. CodeForces 546A-Soldier and Bananas

    题意: 有n dollar,the first banana cost  k dollars,第i个就需cost k*i,问买w个bananas是否需要借钱:借钱需要多少? 分析:首先计算w个bana ...

  7. [网络技术]网关 路由器 OSI

    tracert 1.网关与路由 关键的区别:网关是这样一个网络节点:以两个不同协议搭建的网络可以通过它进行通信.路由器是这样一种设备:它能在计算机网络间收发数据包,同时创建一个覆盖网络(overlay ...

  8. idea快捷键（转）

    Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*...*/ )Ctrl+D 复制行Ctrl+X 删除行快速修复 alt+enter (modify/cast)代码提示 alt+/ctr ...

  9. Tengine安装配置

    为了加快网站的大流量访问速度,公司要求把Nginx更换为Tengine,下面记录下整个安装配置过程: #安装必要依赖 yum install -y pcre pcre-devel zlib zlib- ...

  10. Ogre中OctreeSceneManager

    转自:http://blog.csdn.net/yanonsoftware/article/details/1067265 既然前面分析Mesh(Entity,SceneNode)的渲染时已经看到了O ...