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()">
<!-- onload="setListener()"-->
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
<!-- onmouseover="showself('div1')" onmouseout="hiddenself('div1')"
-->    <div class="div1">innerdiv</div>
    <div class="div1">innerdiv</div>
    <div class="div1">innerdiv</div>
</div>
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
<!-- onmouseover="showself('div2')" onmouseout="hiddenself('div2')"
-->    <div class="div2">innerdiv</div>
    <div class="div2">innerdiv</div>
    <div class="div2">innerdiv</div>
</div>
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
<!-- onmouseover="showself('div3')" onmouseout="hiddenself('div3')"
-->    <div class="div3">innerdiv</div>
    <div class="div3">innerdiv</div>
    <div class="div3">innerdiv</div>
</div>

</body>
</html>

javascript为元素绑定事件响应函数的更多相关文章

  1. javascript元素绑定事件

    js元素绑定事件   想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  4. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  5. jQuery:如何给动态生成的元素绑定事件？

    jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在. 然而, ...

  6. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  7. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  8. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  9. 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 【Spring】Spring系列5之Spring支持事务处理

    5.Spring支持事务处理 5.1.事务准备 以上代码结构与AOP的前置通知.返回通知.异常通知.后置通知一样. 5.2.声明式事务 5.2.1.基于注解 5.2.2.基于配置文件 5. 3.事务传 ...

  2. Tor

    参考: http://www.douban.com/group/topic/67555786/ http://blog.sina.com.cn/s/blog_72a7ac670101km46.html ...

  3. IDEA 14快捷键

    1.ctrl+alt+左箭头.右箭头:返回到上次浏览的代码处(相当于Eclipse的alt+左右箭头) 编辑类: Ctrl+Space 基本代码实例(类.方法.变量) Ctrl + Shift + S ...

  4. hdu 1272 小希的迷宫 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1272 第二条并查集,和畅通工程的解法类似.判断小希的迷宫不符合条件,即有回路.我的做法是,在合并两个集 ...

  5. hdu 3032 Nim or not Nim? (SG函数博弈+打表找规律)

    Nim or not Nim? Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  6. vector.end() 指向的节点

    存储器vector, vector.end() 指向的是最后的结束符,而不是最后一个元素.

  7. Repairing Company（poj 3216）

    题目大意: 有Q个地点,告诉你Q个地点之间的相互距离(从i地点赶到j地点需要的时间).有M项任务, 给你M项任务所在的地点block.开始时间start和任务完成需要时间time.一个工人只有在 他准 ...

  8. JDK JRE 区别

    JDK  包含了编译器,比如让.java编译成.classs文件. JRE =Java Runtime Environment j是一些比如一些split函数需要的包,都在里面,基本的运行环境都在JR ...

  9. php 克隆和引用类

    /*class Ren { public $name; public $sex; function __construct($n,$s) { $this->name=$n; $this-> ...

  10. IoC容器Autofac - Autofac + Asp.net MVC + EF Code First（转载）

    转载地址:http://www.cnblogs.com/JustRun1983/archive/2013/03/28/2981645.html  有修改 Autofac通过Controller默认构造 ...