最近写js脚本一直有个问题,今天上网查找终于找到了一个很有用的事件onpropertychange。IE下详细比对一番,区别如下:
当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获。例如一个 <input
name="text1" id="text1"
/>对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
也就是说:onpropertychange
事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用
js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变,只要有改的相应操作就可能触发。有时当上面
两时间都不能满足需求时,可以考虑只用onblur。
还有一点要注意到,当onblur和onchange事件一起用时,onblur会出问题。。。。详见如下
测试页面:
<html>
<head><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>
转自:http://laoquan2010.iteye.com/blog/397071
分享到:
相关推荐
标题中的“onchange”和“onpropertychange”是JavaScript中两个与事件相关的属性,它们都是在HTML元素上触发特定行为的事件监听器。在本文中,我们将深入探讨这两个事件的区别、用法以及如何在实际开发中应用它们。...
在JavaScript中,`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件,它们各自有特定的触发条件,特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释: 1. `...
oninput、onpropertychange、onchange 的用法和区别 在 Web 开发中,了解 oninput、onpropertychange、onchange 三个事件的用法和区别非常重要,这三个事件都是用于检测用户输入的变化,但它们之间存在着一些关键的...
本文将详细讲解这两个事件的区别以及如何解决 `onchange` 事件在某些情况下的无效问题。 `onchange` 事件是JavaScript中用于监听表单元素(如输入框、选择框等)或某些可触发改变状态的元素(如复选框)在用户进行...
onpropertychange和onchange都不管文本框中的实际值有没有变,只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时,可以考虑只用onblur。 还有一点要注意到,当onblur和onchange事件一起用时,onblur...
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...
在了解如何监听输入框值的即时变化之前,我们需要了解onChange 和 onpropertychange 的不同。onChange 在属性值转变时还必需使得当前元素失去焦点(onblur)才可以激活该事件,onpropertychange 则可以在IE下捕获元素...
需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur...
对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。 具体理解为:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该...
在JavaScript中,处理DOM元素状态变化的事件有多种,其中包括`onpropertychange`、`onchange`和`oninput`。这些事件在不同浏览器中有着不同的表现和兼容性,尤其是在Internet Explorer (IE) 和 Firefox之间。 `...
以下是用jQuery绑定onpropertychange事件的详细步骤和示例: 1. 确保已经加载了jQuery库。 2. 使用jQuery选择器找到目标输入框元素。如果要绑定到多个元素,可以选择相应类名或者使用标签选择器。 3. 使用$.fn.bind...
1.onchange 及其onpropertychange,oninput 在IE下可使用onpropertychangel立即触发监听, oninput 可以使用在FF下,但必须使用w3c推荐的addEventListener的方式来绑定事件. //www.jb51.net/article/25275.htm2. <...
本文将围绕onchange事件在微软的Internet Explorer(简称IE)和Mozilla Firefox(简称FF)浏览器中的表现差异进行讨论,并提供相应的解决方案。 首先,onchange事件是一个非常常用的事件,它在元素值发生改变并失去...
1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是...