当一个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. 使用BroadcastReceiver实现系统对手机电量进行提示

    import android.content.BroadcastReceiver;import android.content.Context;import android.content.Inten ...

  2. 胡扯两句——CDQ分治

    之前听大神讲过CDQ分治大概是个什么东西,但是一直还没有真正去搞过.今天稍微看了一下,写点自己的理解. 首先CDQ分治有两个条件. 条件1:可以分成两个独立互不影响的问题(这里的"独立&qu ...

  3. 类似UC天气下拉和微信下拉眼睛头部弹入淡出UI交互效果（开源项目）。

    Android-PullLayout是github上的一个第三方开源项目,该项目主页是:https://github.com/BlueMor/Android-PullLayout  原作者项目意图实现 ...

  4. DP 剪枝

    DP其实也是和搜索一样可以有剪枝的,昨晚看到一个超级好的DP剪枝题:(HDU - 5009) N段东东,要染色,每次给一个区间染色需要的花费为  该区间颜色总数的平方.  每一段只能被染一次色.求 最 ...

  5. JSONObject put,accumulate,element的区别（转载）

    原文链接:http://ljhzzyx.blog.163.com/blog/static/3838031220126810430157/   public Object put (Object key ...

  6. redis2.8--主从机同步流程

  7. C++中的容器类详解

    一.STL容器类 STL(Standard Template Library)的六大组件:容器(containers).迭代器(iterators).空间配置器(allocator).配接器(adap ...

  8. HTML--10Jquery

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  9. 【django入门教程】Django的安装和入门

    很多初学django的朋友,都不知道如何安装django开发以及django的入门,今天小编就给大家讲讲django入门教程. 注明:python版本为3.3.1.Django版本为1.5.1,操作系 ...

  10. HYSBZ 1415 - 聪聪和可可（概率DP）

    http://vjudge.net/problem/viewProblem.action?id=20613 题意:不用说了,中文题. 这个题可以用概率DP来做. 题中要求猫抓到老鼠的时间期望.分析一下 ...