javascript为元素绑定事件响应函数

javascript中为元素设置响应时间有两种方法。

（1）：object.onclick=functionName;

　　这种方法不可以传递参数。

（2）：object.onclick=function（）{

　　　　　　functionName(arg1,arg2,...);

　　　　}

　　这种方法就可以传递参数了。第二种方法中有一个隐藏的问题。那就是在匿名方法是用外部变量时可能会引发问题。

请见如下代码中的红色部分：

　　  <!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
   .divNotHidden{
       width:100px;
       height:20px;
       margin:0px;
       padding:0px;
       border:#060 1px solid;
       background:#09C;}
   .div1,.div2,.div3{
       background:#F0F;
       border:#060 1px solid;
       width:200px;
       display:none;}
   .outdiv{
       float:left;
       border:#06F 1px solid;
       }

</style>
<script type="text/javascript">

function setListener(){
       var notHidden = document.getElementsByClassName("divNotHidden");


       for(var i=0;i<notHidden.length;i++){

　　　　var number=i+1;
           notHidden.item(i).onmouseover=function(){
               showself("div"+number);
               alert("div"+number);
           };
           notHidden.item(i).onmouseout=function (){
                hiddenself("div"+number);
           };
       }
   }

　　　　上述代码中匿名函数使用了外部的变量。结果绝发现出现了错误的情况：所有的showself，hiddenself 方法的参数都成了：“div3”

　　　　猜测原因：因为给予的事件监听函数只有在事件发生时才会被执行。

　　　　当setListener函数中的for循环执行完成后，number的值是：3 。当目标的onmouseover时间发生时，才会执行：

　　　　　　 showself("div"+number);
alert("div"+number);

　　　　这两句。所以，问题来了。这时的number值是 3 那么传给showself函数的参数就是 “div”+3 。而且永远是 “div”+3

　　*/
   function hiddenself(id){
       var inners = document.getElementsByClassName(id);
       for(var i=0;i<inners.length;i++){
           inners.item(i).style.display="none";
       }
   }

   function showself(id){
       var inners = document.getElementsByClassName(id);
       for(var i=0;i<inners.length;i++){
           inners.item(i).style.display="block";
       }
   }
</script>
</head>

<body onload="setListener()">

<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
   <div class="div1">innerdiv</div>
   <div class="div1">innerdiv</div>
   <div class="div1">innerdiv</div>
</div>
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
   <div class="div2">innerdiv</div>
   <div class="div2">innerdiv</div>
   <div class="div2">innerdiv</div>
</div>
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
   <div class="div3">innerdiv</div>
   <div class="div3">innerdiv</div>
   <div class="div3">innerdiv</div>
</div>

</body>
</html>

秒客网

javascript为元素绑定事件响应函数

相关文章