现在的位置: 首页 > 综合 > 正文

【JQuery】【总结】注册事件是将方法绑定到事件引出的问题

2012年04月30日 ⁄ 综合 ⁄ 共 1744字 ⁄ 字号 评论关闭

将keyup写在keydown里面,然后执行效果就很有点奇怪。

第一次:输出1
第二次:输出2、3
第三次:输出4、5、6
第四次:输出7、8、9、10
第五次……

怎么执行的次数和第几次输入有关系。

代码如下

<!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><title>
    无标题页
</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
var num=1;
$(document).ready(function(){
    $("#txt1").keydown(function(){ 
        $("#txt1").keyup(function(){
            $("#spanTest1").html($("#spanTest1").html()+num+"<br/>");
            num++;
        });
    });
});
</script>
</head>
<body>
    <div>
    <input type="text" id="txt1" />
    <span id="spanTest1">测试执行了几遍<br /></span><br />
    </div>
    </form>
</body>
</html>

原因是:
1、每次keydown的时候 他都会添加一个keyup的事件处理函数。
2、这些keyup处理函数是绑定的,不是替换的,所以的你keyup处理函数就在不断增多1个。
这个$("#txt1").keyup其实是添加一个绑定.也就是addEventListener或者AttachEvent。
而不是直接domObject.onkeyup才是给这个事件世界赋值.也就是替换掉以前的。

将JQuery部分修改为如下即可。
var num=1;
$(document).ready(function(){
    $("#txt1").keydown(function(){ 
        $(this).get(0).onkeyup = function(){$("#spanTest1").html($("#spanTest1").html()+num+"<br/>");
            num++;};
    });
});

Javascript的onkeyup则和JQuery中不同,每次修改其方法即为替换而不是绑定。

代码如下:

Javascript部分
var num=1;
function down(){
    document.getElementById("txt2").onkeyup=function(){
        document.getElementById("spanTest1").innerHTML=document.getElementById("spanTest1").innerHTML+num+"<br/>";
        num++;
    };
}

HTML部分
    <span id="spanTest1">测试执行了几遍<br /></span><br />   
    <input type="text" id="txt2" onkeydown="down()" />

另外,在IE浏览器中onkeyup不能直接赋函数,但允许使用匿名函数。
或者在window.onkeyup=fun;//fun为预先写好的函数 function fun(){}

 

本帖来自:http://topic.csdn.net/u/20101216/17/ddfeac81-c518-4d97-8b1e-414bcdc0784e.html?seed=2028786840&r=70632332#r_70632332

抱歉!评论已关闭.