`
jiaguwen123
  • 浏览: 415089 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

JS中onpropertychange事件和onchange事件区别

阅读更多

当一个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> 

分享到:
评论

相关推荐

    oninput,onpropertychange,onchange的用法和区别

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

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

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

    JS中onpropertychange和onchange事件区别小结

    也就是说:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用js改变其值不能触发!onpropertychange和onchange都...

    onchange和onpropertychange

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

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

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

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

    在JavaScript中,`onchange` 和 `onpropertychange` 是两个不同的事件处理方式,它们各自在特定场景下有着不同的用途。本文将详细讲解这两个事件的区别以及如何解决 `onchange` 事件在某些情况下的无效问题。 `...

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

    JavaScript 监听输入框值的即时变化 ...监听输入框值的即时变化可以使用onpropertychange 事件或oninput 事件来实现,但是需要注意浏览器的差异性问题,使用不同的事件和注册方法来适应不同的浏览器类型。

    兼容Firefox和IE的onpropertychange事件oninput

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

    jquery下onpropertychange事件的绑定方法

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

    jQuery/JS监听input输入框值变化实例

    综上所述,文章详细讲述了在Web开发中如何使用不同的JavaScript事件来监听input元素的值变化,并提供了多种方法来确保代码在不同浏览器中的兼容性和功能的完整性。这使得文章成为了一个很好的资源,供前端开发人员在...

    js onpropertychange输入框 事件获取属性

    具体理解为:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件! 但onpropertychange只有IE支持,FireFox下的怎么解决呢?firefox的事件oninput,效果和...

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

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

    js页面事件大全,js页面事件大全

    本文将详细介绍一系列常见的JS页面事件,帮助开发者更好地理解和运用这些事件。 #### 二、鼠标事件 1. **`onClick`**: 当用户单击某个元素时触发。 2. **`onDblClick`**: 当用户双击某个元素时触发。 3. **`...

    JS中包涵的事件分类

    为了更好地理解和应用JS事件,本文将详细介绍JS中的各种事件及其应用场景。 #### 1. 鼠标事件 (Mouse Events) 鼠标事件是用户与网页交互时最常见的一类事件。它们主要涉及鼠标的各种操作,如点击、移动等。 - **...

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

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

Global site tag (gtag.js) - Google Analytics