onpropertychange事件的奇怪现象

奇怪现象是：JS创建的<input>输入框的值第一次被改变时，没有触发onpropertychange事件。
请在IE浏览器下测试。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
一般的输入框：<input type="text" value="1" id="input1" /><br />
JS创建的输入框：
<script language="javascript">var input1 = document.getElementById("input1");
input1.attachEvent("onpropertychange",f);var input2 = document.createElement("input");
input2.type = "text";
input2.value = "1";
document.body.appendChild(input2);
input2.attachEvent("onpropertychange",f);function f(){alert("!");}
</script>
</body>
</html>

解决方案 »

  1.   

    http://topic.csdn.net/u/20100903/23/84d9d444-8d8c-4fb4-bd36-21d38bdfbd98.html?94392选中之后输入，其实是经过了两个改变的过程：删除值，再输入值。按需求是要触发两次的，而且选中默认值也不是项目需求。
      

  2.   


    初步推测是一个BUG. 但解决方法还是有的.
    var input2 = document.createElement('<input type="text" value = "1">');
    input2.attachEvent("onpropertychange",f);
    document.body.appendChild(input2);
      

  3.   

    这样可以，不知道为什么
    <script language="javascript">
    var input1 = document.getElementById("input1");
    input1.attachEvent("onpropertychange",f);
    var input2 = document.createElement("<input type='text' value='1'/>");
    //input2.type = "text";
    //input2.value = "1";
    document.body.appendChild(input2);
    input2.attachEvent("onpropertychange",f);
    function f(){alert("!");}
    </script>
      

  4.   


    当代码成这样时，同样的问题又来了。var input1 = document.getElementById("input1");
    input1.attachEvent("onpropertychange",f);
    var input2 = document.createElement('<input type="text" value = "1">');
    //input2.type = "text";
    //input2.value = "1";
    input2.attachEvent("onpropertychange",f);
    var input3 = input2.cloneNode(true);//复制节点以及事件
    document.body.appendChild(input3);
    function f(){alert("!");}
      

  5.   

    反正onpropertychange也就IE直接，在调用createElement时将事件一起加上就没问题了。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    一般的输入框：<input type="text" value="1" id="input1" /><br />
    JS创建的输入框：
    <script language="javascript">var input1 = document.getElementById("input1");
    input1.attachEvent("onpropertychange",f);
    var input2 = document.createElement('<input type="text" value = "1" onpropertychange="f()">');document.body.appendChild(input2);
    function f(){alert("!");}</script>
    </body>
    </html>
      

  6.   

    项目需要兼容其他浏览器，现在只是就IE情况下处理方法进行讨论。因为要兼容其他浏览器，所以不能直接onpropertychange，必须用到attachEvent以及addEventListener。
      

  7.   

    那你不是区分下浏览器，如果是IE就
    var input2 = document.createElement('<input type="text" value = "1" onpropertychange="f()">');其他浏览器就addEventListener，事件都不一样，所以这个判断过程是必须的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    一般的输入框：<input type="text" value="1" id="input1" oninput="alert(this.value)"/><br />
    JS创建的输入框：
    <script language="javascript">
    var input2 ;
    if(document.all)input2= document.createElement('<input type="text" value = "1" onpropertychange="f()">');//IE
    else {//其他浏览器
      input2=document.createElement('input');
      input2.type="text";
      input2.value="1";
      if(navigator.userAgent.indexOf('Firefox')!=-1)input2.addEventListener('input',f,false);//FF的是oninput，其他的浏览器不知道是否支持，所以你还得判断下
    }document.body.appendChild(input2);
    function f(){alert("!");}</script>
    </body>
    </html>
      

  8.   

    onchange在改变的时候会执行两次代码，而onpropertychange不会，在ff中onchange只执行一次，也许ie就是因为这个出了个onpropertychange这个事件，每项到onpropertychange却又有这个漏洞，真实无语了
      

  9.   

    这虽然算是个解决方法。但是因为我的项目要同一时间创建大量input，为了提高脚本执行效率，需要用到cloneNode,而不是所有input都用createElement创建。但当使用cloneNode后，同样问题又来了。参见代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    一般的输入框：<input type="text" value="1" id="input1" /><br />
    JS创建的输入框：
    <script language="javascript">
    var input1 = document.getElementById("input1");
    input1.attachEvent("onpropertychange",f);
    var input2 = document.createElement('<input type="text" value = "1" onpropertychange="f();">');
    var input3 = input2.cloneNode(true);//复制节点以及事件
    document.body.appendChild(input3);
    function f(){alert("!");}
    </script>
    </body>
    </html>
      

  10.   


    貌似没想到啥好办法.而且你所说的cloneNode能够复制事件 是不对的. 那是IE attchEvent的bug. 你恰恰把BUG当做需求用了. 实在不行IE就只能放弃clone了
      

  11.   


    这样创建:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    一般的输入框：<input type="text" value="1" id="input1" /><br />
    JS创建的输入框：
    <script language="javascript">function f(){alert("!22");}var input1 = document.getElementById("input1");
    input1.attachEvent("onpropertychange",f); 
    var input2 = document.createElement("<input type='text' value='1'>"); 
    var input3 =document.body.appendChild(input2); 
    input3.attachEvent("onpropertychange",f);</script>
     
    </body>
    </html>
      

  12.   

    在这种需要大量dom操作的情况下，lz可以考虑使用js库来。可以提高效率