当一个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. OLAP vs OLTP: what makes the difference

    OLAP vs OLTP: what makes the difference OLPT and OLAP are complementingtechnologies. You can't live ...

  2. 国内HTML5前端开发框架汇总

    国内HTML5前端开发框架汇总 Dawei Cheng 程大伟... 于 星期日, 02/12/2012 - 20:53 提交 国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery ...

  3. HDU 4622 求解区间字符串中的不同子串的个数

    题目大意: 给定一个长度<2000的串,再给最多可达10000的询问区间,求解区间字符串中的不同子串的个数 这里先考虑求解一整个字符串的所有不同子串的方法 对于后缀自动机来说,我们动态往里添加一 ...

  4. 反Secure Boot垄断：兼谈如何在Windows 8电脑上安装Linux

    感谢HQSQ的投递一.自由软件基金会的呼吁上周,2012年将近结束的时候,自由软件基金会(FSF)发出呼吁,要求人们继续支持反Secure Boot垄断,希望签名者能达到5万人(目前是4万).我觉得, ...

  5. iOS 下如果存在UIScrollerView 使用UIScreenEdgePanGestureRecognizer实现侧滑效果失效的问题

    当你在使用UIScreenEdgePanGestureRecognizer手势实现侧滑的时候,如果后期你导航控制器push出的界面中包含UIScrollerView,这个时候你会发现,侧滑效果无法实现 ...

  6. python 绘图工具 matplotlib 入门

    转自: http://www.cnblogs.com/kaituorensheng/p/3440273.html matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的 ...

  7. self进行weak化

    创建block匿名函数之前一般需要对self进行weak化,否则造成循环引用无法释放controller: __weak MyController *weakSelf = self 或者 __weak ...

  8. JS中阻止默认事件与事件冒泡

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  9. C++语法疑点

    1函数模板不支持偏特化 2类内部的typedef 必须放在最前面,不然没法用: 疑问:为什么类声明处定义的函数体中能出现在后面在声明的成员变量??因为C++对于成员函数函数体的解析是放在整个类声明完毕 ...

  10. 调用未绑定的父类方法和使用supper 函数 之间的选择.

    class New_int(int): # 定义一个新的类 继承 int 类 def __add__(self,other): # 重写 + 运算符 # __add__ 就是 int 中 + 的行为 ...