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. FastJSON 简介及其Map/JSON/String 互转

    在日志解析,前后端数据传输交互中,经常会遇到 String 与 map.json.xml 等格式相互转换与解析的场景,其中 json 基本成为了跨语言.跨前后端的事实上的标准数据交互格式.应该来说各个 ...

  2. HDOj 1010 DFS优化

    #include<cstdio> #include<cstring> ]={,,,-}; ]={,,-,}; ][]; int x1,y1,x2,y2; int step; i ...

  3. Install ssdb-rocks on CentOS 6

    Install ssdb-rocks on CentOS 6 C.C.  发表于 2014年08月10日 20:14 | Hits: 649 为了优化节操精选的弹幕系统,打算更换到Facebook的R ...

  4. intellij idea 如何更改编辑器文本字体和大小

    换上了intellij idea之后,第一件事就是想要改变下文字字体,因为在我这个27寸的2k分辨率的屏幕上,文字显然太小了. intellij idea字体设值分成两部分,一部分是UI部分字体字号设 ...

  5. JQuery $.ajax()方法详解

    jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").cli ...

  6. iterator与const_iterator及const iterator区别

    如果你传递过来一个const类型的容器,那么只能用const_iterator来遍历.  C++ Code  12345   void Method(const vector<int> v ...

  7. Java for LeetCode 052 N-Queens II

    Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...

  8. LightOJ 1234 Harmonic Number (打表)

    Harmonic Number Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submi ...

  9. Servlet、JSP选择题

    Java EE软件工程师认证考试 试题库-选择题   一.    选择题(包括单选和双选) 1.A 对于B/S架构的工作流程,以下说法正确的是(   )(选择一项) A. 浏览器接受用户的输入--&g ...

  10. javascript实现的图数据结构的广度优先 搜索（Breadth-First Search，BFS）和深度优先搜索（Depth-First Search，DFS）

    最后一例,搞得快.三天之内走了一次.. 下一步,面象对像的javascript编程. function Dictionary(){ var items = {}; this.has = functio ...