`
流浪鱼
  • 浏览: 1682079 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

onchange和onpropertychange区别

    博客分类：
  • js
 
阅读更多

最近写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>

分享到：
| datagrid的扩展
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    onchange和onpropertychange

    标题中的“onchange”和“onpropertychange”是JavaScript中两个与事件相关的属性，它们都是在HTML元素上触发特定行为的事件监听器。在本文中，我们将深入探讨这两个事件的区别、用法以及如何在实际开发中应用它们。...

    onchange，onpropertychange，oninput键盘输入和js赋值时区别

    在JavaScript中，`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件，它们各自有特定的触发条件，特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释： 1. `...

    oninput,onpropertychange,onchange的用法和区别

    oninput、onpropertychange、onchange 的用法和区别 在 Web 开发中，了解 oninput、onpropertychange、onchange 三个事件的用法和区别非常重要，这三个事件都是用于检测用户输入的变化，但它们之间存在着一些关键的...

    js中的onchange和onpropertychange (onchange无效的解决方法)

    笔者注：今天我在用到onchange事件时没有任何反应，最后翻查资料才知道Onchange的局限性和不稳定性。而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下（幸亏有这个性能，做出的东西老板娘很...

    JS中onpropertychange和onchange事件区别小结

    onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时，可以考虑只用onblur。 还有一点要注意到，当onblur和onchange事件一起用时，onblur...

    javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...

    js监听输入框值的即时变化onpropertychange、oninput.docx

    在了解如何监听输入框值的即时变化之前，我们需要了解onChange 和 onpropertychange 的不同。onChange 在属性值转变时还必需使得当前元素失去焦点(onblur)才可以激活该事件，onpropertychange 则可以在IE下捕获元素...

    js监听输入框值的即时变化onpropertychange、oninput

    需要了解的知识 首先，我们需要了解onchange和onpropertychange的不同： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur...

    js onpropertychange输入框 事件获取属性

    对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。 具体理解为：onpropertychange能及时捕获属性值的变化，而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该...

    javascript 学习笔记(onchange等)

    1.onchange 及其onpropertychange,oninput 在IE下可使用onpropertychangel立即触发监听， oninput 可以使用在FF下，但必须使用w3c推荐的addEventListener的方式来绑定事件. //www.jb51.net/article/25275.htm2. &lt;...

    兼容Firefox和IE的onpropertychange事件oninput

    在JavaScript中，处理DOM元素状态变化的事件有多种，其中包括`onpropertychange`、`onchange`和`oninput`。这些事件在不同浏览器中有着不同的表现和兼容性，尤其是在Internet Explorer (IE) 和 Firefox之间。 `...

    jquery下onpropertychange事件的绑定方法

    由于onpropertychange事件在IE浏览器中的表现和其他浏览器略有不同，开发者应当谨慎使用并测试在主要目标浏览器中的表现。在编写代码时，还要注意识别并修正文档扫描时可能出现的OCR错误，保证代码的准确性。

    关于onchange事件在IE和FF下的表现及解决方法

    本文将围绕onchange事件在微软的Internet Explorer（简称IE）和Mozilla Firefox（简称FF）浏览器中的表现差异进行讨论，并提供相应的解决方案。 首先，onchange事件是一个非常常用的事件，它在元素值发生改变并失去...

    input标签内容改变的触发事件介绍

    1. onchange事件与onpropertychange事件的区别： onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是...

Magicbox
Global site tag (gtag.js) - Google Analytics