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. Leetcode 之Convert Sorted List to Binary Search Tree（55）

    和上题思路基本一致,不同的地方在于,链表不能随机访问中间元素. int listLength(ListNode* node) { ; while (node) { n++; node = node-& ...

  2. RouterOS DNS劫持 -- A记录

    通常我们使用RouterOS的DNS主要是用于实现DNS缓存功能,即由RouterOS实现DNS服务器解析功能,除了这个功能,RouterOS可以实现对内网域名解析劫持,即实现路由网关的A记录查询. ...

  3. POJ 1308&&HDU 1272 并查集判断图

      HDU 1272 I - 小希的迷宫 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64 ...

  4. C++中new的解说

    new int;//开辟一个存放整数的存储空间,返回一个指向该存储空间的地址(即指针) new int(100);//开辟一个存放整数的空间,并指定该整数的初值为100,返回一个指向该存储空间的地址 ...

  5. java 异常处理 Throwable Error 和Exception

    Java异常类层次结构图:       异常的英文单词是exception,字面翻译就是“意外.例外”的意思,也就是非正常情况.事实上,异常本质上是程序上的错误,包括程序逻辑错误和系统错误. 比如使用 ...

  6. CSS本页写样式

    <style type="text/css">p{ color:#ff0000; font-size:24px; font-family:"隶书"; ...

  7. Android 中的code sign

    Android 中和ios中都有code sign.它们的目的一样,都是要保证程序的可靠性,最基本实现原理也一样.但是sign的过程比较不同. 下面记录一点Android sign的重要知识. 请参看 ...

  8. sqltext的参数化处理

    说到sql的参数化处理,我也是醉了,因为sql引擎真的是一个无比强大的系统,我们平时做系统的时候都会加上缓存,我想如果没有缓存,就不会有什么 大网站能跑的起来,而且大公司一般会在一个东西上做的比较用心 ...

  9. codeforces 471C.MUH and House of Cards 解题报告

    题目链接:http://codeforces.com/problemset/problem/471/C 题目意思:有 n 张卡,问能做成多少种不同楼层(floor)的 house,注意这 n 张卡都要 ...

  10. Java问题排查工具箱[转载]

    转载自:http://hellojava.info/?p=517 作者:阿里毕玄 问题排查除了最重要的解决思路和逻辑推导能力外,工具也是不可缺少的一部分,一个好用的工具可以事半功倍,甚至在某些情况下会 ...