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. Boltzmann机

    博客园不能上传附件,所以这里贴两张流程图吧.一个是模拟退火算法的流程图(Boltzmann机本实上就是反复退火的过程), 个是Boltzmann调整权值的过程.

  2. Insertion Sort List

    对链表进行插入排序,比对数组排序麻烦一点. ListNode *insertSortList(ListNode *head) { ListNode dummy(-); for (ListNode *c ...

  3. c++ exports def文件

    https://msdn.microsoft.com/zh-cn/library/hyx1zcd3(v=vs.80).aspx EXPORTS 引入了一个由一个或多个 definitions(导出的函 ...

  4. C语言指针总结

    C语言中的精华是什么,答曰指针,这也是C语言中唯一的难点. C是对底层操作非常方便的语言,而底层操作中用到最多的就是指针,以后从事嵌入式开发的朋友们,指针将陪伴我们终身. 本文将从八个常见的方面来透视 ...

  5. Android runProguard配置 导致module lib 中的包编译时无法识别

    今天写代码时用到了另一个lib型的工程,把它添加到dependencies后,在原工程中可以引用lib中的文件了,但是编译时就会报错,提示包不存在,后来在build.gradle中设置runProgu ...

  6. 高效PHP开发注意事项

    2015年2月26日 17:23:26 http://www.open-open.com/lib/view/open1332904714233.html

  7. 读取STL模型

    读取二进制格式的STL模型文件 std::ifstream fin;fin.open(stlFilePath, std::ios::in | std::ios::binary);bool isBina ...

  8. 【读书笔记】读《JavaScript设计模式》之桥接模式

    桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化. 一.使用场景 使用场景一:事件监控 对于前端而言,最典型的使用场景——事件监控.如—— addEvent(element ...

  9. 【转】c# 协变和逆变

    本文转自:http://www.cnblogs.com/rr163/p/4047404.html C#的协变和逆变 由子类向父类方向转变是协变,用out关键字标识,由父类向子类方向转变是逆变,用in关 ...

  10. 菜鸟学Linux命令:bg fg jobs命令 任务管理

    jobs命令 jobs命令用于查看当前终端后台运行的任务 注意和ps的区别: ps命令用于查看瞬间进程的动态 通过一个实例可以理解它们之间的区别,依次执行如下命令:vim & //后台执行vi ...