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. ZeroMQ安装

    一.ZeroMQ介绍 ZeroMQ是一个开源的消息队列系统,按照官方的定义,它是一个消息通信库,帮助开发者设计分布式和并行的应用程序. 首先,我们需要明白,ZeroMQ不是传统的消息队列系统(比如Ac ...

  2. Java 23种设计模式

    转自: http://zz563143188.iteye.com/blog/1847029 ; i<count; i++){ list.add(new MailSender()); } } pu ...

  3. HLG1744组合数学问题与lucas定理运用

    The figure below shows Pascal's Triangle: Baby H divides Pascal's Triangle into some Diagonals, like ...

  4. poj2993 翻转2996

    Emag eht htiw Em Pleh Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2944   Accepted:  ...

  5. 【转】实战 SSH 端口转发

    本文转自:http://www.ibm.com/developerworks/cn/linux/l-cn-sshforward/index.html,至于有什么用,懂的懂! 实战 SSH 端口转发 通 ...

  6. scrapy爬虫成长日记之将抓取内容写入mysql数据库

    前面小试了一下scrapy抓取博客园的博客(您可在此查看scrapy爬虫成长日记之创建工程-抽取数据-保存为json格式的数据),但是前面抓取的数据时保存为json格式的文本文件中的.这很显然不满足我 ...

  7. 在SQLServer处理中的一些问题及解决方法 NEWSEQUENTIALID()

    一.DBLINK性能问题select * from dbsource.dbname.dbo.table where guid in (select guid from tablechangelog w ...

  8. ShortestPath:Six Degrees of Cowvin Bacon(POJ 2139)

    牛与电影 题目大意:就是一群牛,又在玩游戏了(怎么你们经常玩游戏),这个游戏规则如下,把牛拆分成一个一个组,并且定义一个“度”,规定在一个组的牛与他自己的度为0,与其他牛的度为1,不同组的牛不存在度, ...

  9. SQL 删除存在于A表但是不存在B表中的记录

    目的是是的A表和B表某一个列集合相等 delete from A where tagetColumn not in ( select targetColumn from B)

  10. Ruby备忘