A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks


      相信很多web开发朋友都使用过onpropertychange这个事件,虽然是ieOnly但也能帮我们不少忙,可能我们只知道该事件在输入框值发生变化的时候会被立即触发,其实这里还有很多我们小秘密。

      首先从名字上看onpropertychange上来看,应该是属性改变的时候被触发。做个测试。
     
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  
<script type="text/javascript">
  
<!--
    document.getElementById('xx').attachEvent('onpropertychange',
function(o){alert('ok')});
  
//-->
  </script>


     执行上面的代码,单击输入框发现也会触发onpropertychange,输入一个值同样也会触发这个事件,这就证明了,只要有属性的值被修改就会触发该事件。

     第二、既然我们发现了这个特点,那就会有一个问题了:当我们有时在输入框值发生改变时希望执行一个函数操作,但同时也要修改一个自定义的属性,这样onpropertychange就会被触发两次,这个可能并不是我们所希望的。
    猜想一下,既然提供了这么一个属性,那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容.
  <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  
<script type="text/javascript">
  
<!--
    document.getElementById('xx').attachEvent('onpropertychange',
function(){
        alert(arguments.length);
        
for(var i=0;i<arguments.length;i++){
            alert(arguments[i]);
        }
    });
  
//-->
  </script>

      执行上面一段代码,会发现弹出了1和[object],这说明该事件只给回调函数传入一个参数而且是object类型。
      那我们就试试遍历一下这个object。

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  
<script type="text/javascript">
  
<!--
    document.getElementById('xx').attachEvent('onpropertychange',
function(o){
        
for(var item in o){
            alert(item
+":"+o[item]);
        }
    });
  
//-->
  </script>
     执行一下,发现有很多个属性,但仔细看我们可能会发现这么一个属性:propertyName,相信每个人都能猜到这个属性的意思了。对,这个就是用来获取哪个属性被修改的。
     
 <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  
<script type="text/javascript">
  
<!--
    document.getElementById('xx').attachEvent('onpropertychange',
function(o){
        alert(o.propertyName);
    });
  
//-->
  </script>

   分别单击文本框和输入一个值,会发现分别弹出了myprop和value。
  
   再回到我们开始的问题,我们只需要判断是否是value被改变就ok了。
   直接看代码吧:
  
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
  
<script type="text/javascript">
  
<!--
    document.getElementById('xx').attachEvent('onpropertychange',
function(o){
        
if(o.propertyName!='value')return;  //不是value改变不执行下面的操作
        //.函数处理
    });
  
//-->
  </script>
posted on 2008-06-23 13:42 Yemoo'S JS Blog 阅读(10325) 评论(9)  编辑 收藏 引用 所属分类: javascript技巧总结

评论

# re: 有关onpropertychange事件的一点小发现 2008-12-09 10:23 tonny
很喜欢你的这种思考方式
简单易懂 思路清晰
我也在研究神奇的js
希望能通过您的指导
更上一层
  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2009-01-08 19:37 topin
非常感谢你的经验

解决了我项目中的一个大问题。  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2009-06-24 13:30 钢七连连长
您好,还是有好多疑问(在细琢磨下),为什么您是通过attachEvent来赋予事件了,
<input type="text" value="xxx" id="xx" onpropertychange="test2();" onclick="this.myprop='xx'" >
<script type="text/javascript">
function test2()
{
alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
</script>
这段代码,弹出的却是0
我的QQ:903039434
喜欢研究js,希望能和您一起探讨  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现[未登录] 2010-08-18 15:47 月影
是 o.originalEvent.propertyName 谢谢  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2011-11-10 18:16 麦子
模拟上传 使用onpropertychange 结合ajaxupload插件无法处理正常提交  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2011-11-10 18:22 麦子
这个插件 ajaxFileUpload 在火狐理由模拟上传可以操作。。但在IE下面只能用onpropertychange 但是又无法触发ajaxFileUpload 提交  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2013-08-19 17:56 yz1309
你好,你的发现正解决了我的问题,真是谢谢你了。  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2014-02-25 14:03 Lasvegas
前辈栽树,后辈乘凉,感谢。  回复  更多评论
  

# re: 有关onpropertychange事件的一点小发现 2014-03-07 10:46 胡xueyan
大神  回复  更多评论
  

只有注册用户登录后才能发表评论。