将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