`
xinlingwuyu
  • 浏览: 138386 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript利用闭包循环绑定事件

JavaScriptXHTMLHTML 
阅读更多

<!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>  
    <title>Untitled Page</title>  
</head>  
<body>  
<ul id="list">  
<li>第1条记录</li>  
<li>第2条记录</li>  
<li>第3条记录</li>  
<li>第4条记录</li>  
<li>第5条记录</li>  
<li>第6条记录</li>  
</ul>  
<script type="text/javascript">  
    function tt(nob) {   
        this.clickFunc = function() {   
        alert("这是第" + (nob + 1) + "记录");   
        }   
    }   
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组   
    for (var i = 0; i <= list_obj.length; i++) {   
        list_obj[i].onmousemove = function() {   
            this.style.backgroundColor = "#cdcdcd";   
        }   
        list_obj[i].onmouseout = function() {   
            this.style.backgroundColor = "#FFFFFF";   
        }   
        var col = new tt(i);   
        list_obj[i].onclick = col.clickFunc;   
    }   
</script>  
</body>  
</html>

分享到：
| javascript获取本机ip地址 mac地址
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript闭包传参和事件的循环绑定示例探讨

    标题中提到的关键概念包括JavaScript闭包、传参以及事件循环绑定。这三个概念在JavaScript编程中非常关键，它们的使用方法和特性对于构建Web应用的交互行为有着直接的影响。 在描述中提到循环绑定事件的问题，通常...

    Javascript循环绑定事件的示例代码

    本篇资源摘要信息将对Javascript循环绑定事件的示例代码进行详细的解释，并对闭包的概念进行深入分析。 一、循环绑定事件的基本概念 在Javascript中，我们可以使用循环来绑定事件处理函数，以达到批量处理的目的。...

    JavaScript在for循环中绑定事件解决事件参数不同的情况

    综上所述，在JavaScript中，特别是在使用for循环绑定事件时，若要解决每个事件绑定时参数不同的问题，闭包提供了一种有效的解决方案。通过使用闭包，我们可以确保事件处理函数能够正确地引用到在循环中期望的变量值...

    深入理解JQuery循环绑定事件

    在深入探讨jQuery循环绑定事件之前，我们需要了解jQuery是什么。jQuery是一个快速、小巧、功能丰富的JavaScript库，它通过一个统一的API简化了HTML文档遍历、事件处理、动画和Ajax交互。使用jQuery，开发者可以编写...

    JQuery在循环中绑定事件的问题详解

    在使用JQuery进行DOM操作时，特别是在循环中为多个元素绑定事件，需要注意变量作用域以及事件绑定的正确方式。...通过这篇文章，读者可以深入理解JQuery循环绑定事件的机制，并在实际项目中正确应用这一技巧。

    javascript闭包高级教程

    ### JavaScript闭包高级教程 #### 简介 在JavaScript编程中，“闭包”是一个非常重要的概念，尤其对于希望深入理解和高效使用JavaScript的开发者来说。简单地说，闭包是一种能够记住并访问其创建时周围环境的函数...

    JavaScript给每一个li节点绑定点击事件的实现方法

    其次，使用for循环遍历集合中的每一个节点，并为它们分别绑定事件。第三，利用`this`关键字在事件处理函数中引用触发事件的节点。最后，通过闭包（IIFE）解决循环中变量共享问题，实现为每个节点绑定带有不同参数的...

    javascript闭包

    ### JavaScript闭包详解 #### 一、闭包概念与工作机制 **闭包**是JavaScript中最强大的特性之一，它使得函数能够记住并访问其定义时所在的作用域中的变量。要理解和运用闭包，首先需要理解作用域、作用域链以及...

    浅谈JS闭包中的循环绑定处理程序

    初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。

    JavaScript中闭包之浅析解读(必看篇)

    6. 事件处理：在处理动态绑定事件时，常常使用闭包来保存事件处理器的状态。例如，在循环中为多个元素绑定点击事件时，闭包可以保证每个事件处理器引用的是正确的元素。 闭包虽然强大，但也有一些需要注意的地方，...

    动态循环给onclick赋值(解决闭包问题)

    4. **使用数组存储回调函数**：将每个回调函数存储在一个数组中，然后在循环外为元素绑定事件。 ```javascript const callbacks = []; for (let i = 0; i ; i++) { callbacks.push(function() { console.log(i); ...

    最符合菜鸟的闭包

    7. **事件处理**：在处理DOM事件时，闭包可以防止内部函数失去对事件源的引用，例如在循环中为多个元素绑定事件监听器。 理解闭包需要时间和实践，关键在于掌握如何创建和利用闭包来解决实际问题。通过不断练习和...

    JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    总结来说，当你需要批量为元素绑定事件时，避免使用共享的循环变量，而是利用闭包或`with`关键字来保存每个元素的唯一状态。尽管`with`提供了一种简洁的解决方案，但考虑到其潜在的副作用，使用闭包通常是更好的选择...

    js循环给li绑定事件实现 点击li弹出其索引值 和内容的方法

    ### JavaScript 循环给 li 绑定事件实现点击 li 弹出其索引值和内容的方法 在前端开发中，经常需要对 DOM 元素进行操作，比如为多个元素添加事件监听器。本文将详细介绍如何使用原生 JavaScript 和 jQuery 来实现...

    Javascript动态绑定事件的简单实现代码

    3. for循环绑定事件的常见问题： 在for循环中直接绑定事件时，由于JavaScript的闭包特性，循环中的变量i是共享的。因此，当事件处理函数被执行时，变量i的值是循环结束后的最终值，而不是绑定事件时的索引值。这就是...

    JavaScript闭包详解

    例如，在for循环中为每个元素绑定事件处理函数时，事件处理函数中的变量可能不会按预期工作。 ### 解决循环中的闭包问题 为了解决循环中的闭包问题，可以使用立即执行函数表达式（IIFE）为每次循环创建一个新的作用...

    浅谈JavaScript for循环 闭包

    这些解决方案展示了JavaScript闭包和作用域的复杂性，以及如何通过不同的技术手段来控制函数作用域内的变量访问。在实际的前端开发工作中，根据具体情况选择合适的解决方案是非常重要的。对for循环和闭包的理解能够...

Magicbox
Global site tag (gtag.js) - Google Analytics