当一个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. 西天取经第一步——制作自己的HTML5游戏

    废话不说,直入主题:这是一个休闲益智类游戏,与愤怒的小鸟类似采用Box2dWeb引擎.再开发游戏之前,首先我要把Box2dWeb给总结一下方便以后调用 大家可以在http://code.google. ...

  2. 长理ACM 7-密码破译(闫博钊)

    /* //题目标题: *密码破译(闫博钊) //题目描述: *某组织欲破获一个外星人的密码,密码由一定长度的字串组成.此组织拥有一些破译此密码的长度不同的钥匙,若两个钥匙的长度之和恰好为此密码的长度, ...

  3. Asp.net项目因Session阻塞导致页面打开速度变慢

    发现罪魁祸首是Session阻塞造成的.默认情况下session状态是“可写状态”(EnableSessionState=”true”),即当用户打开任何一个页面时,该页面的Session就会持有一个 ...

  4. Java Bad version number in .class file

    错误信息: java.lang.UnsupportedClassVersionError: Bad version number in .class file at java.lang.ClassLo ...

  5. Android 应用按两下返回键退出应用程序

    在android应用开发中,有时候应用会用到按两下返回键退出应用的功能,今天介绍一下这个功能,直接上代码: @Override public boolean dispatchKeyEvent(KeyE ...

  6. Quartz之主方法运行

    import static org.quartz.JobBuilder.newJob; import static org.quartz.TriggerBuilder.newTrigger; impo ...

  7. [安卓][转]internal(com.android.internal)和hidden(@hide)APIs简介及在应用程序中的调用方法

    转自:http://www.cnblogs.com/xirihanlin/archive/2011/06/05/2073118.html [引言]:我在做android softap的时候看到andr ...

  8. 未能加载文件或程序集“DeveloperKit10.1/DotNet/ESRI.ArcGIS.ADF.Local.或它的某一个依赖项

    使用VS2010进行ArcGIS Engine 10.1进行开发过程中,出现: 错误 1 未能加载文件或程序集“file:///D:/ArcGIS/DeveloperKit10.0/DotNet/ES ...

  9. 一个很好介绍js的例子

    function UpdateInit(opt){ this.init(opt);} UpdateInit.prototype={ loadUrl:null, loadParam:null, befo ...

  10. 禁用gridview默认点击效果

    cf_gridview.setSelector(new ColorDrawable(Color.TRANSPARENT)); 然后自己给做一个按下的效果xml文件