for循环中的事件绑定

左手的ㄟ右手 2021-09-15 19:34 429阅读 0赞

html

<button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>

js

var btns = document.querySelectorAll('button')
        for (var i = 0; i < btns.length; i++) { //for循环是同步事件
            btns[i].onclick = function () {//点击是一个异步的过程,点击的时候,for循环已经循环完毕,所以会取最终值
                alert(i)//弹5
            }
        }
        for (var i = 0; i < btns.length; i++) { 
            btns[i].onclick = (function (i) {//立即执行0,1,2,3,4
                alert(i)
            })(i)
        }
        for (var i = 0; i < btns.length; i++) {
            (function(i) {//自调用匿名函数,形成了一个闭包,它会独自开辟一个空间存放传进来的i,
                btns[i].onclick = function () {//因为点击函数会用到父函数匿名函数的i,所以i被调用后不会被销毁
                    alert(i)//点击执行0,1,2,3,4
                }
            })(i)
        }
        //es6=>let自带作用域
        for (let i = 0; i < btns.length; i++) { //for循环的时候因为点击事件会用到i,每次循环的i会保存在let的作用域大括号里
            btns[i].onclick = function () {
                alert(i)
            }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

相关 v-for元素绑定事件代理

题目： vue 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？解析：事件代理作用主要是 2 个 1. 将事件处理程序代理到父节点，减少内存占用率

心已赠人/ 2023年10月12日 08:17/ 0 赞/ 14 阅读

相关 JS中的事件绑定

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

偏执的太偏执、/ 2023年01月21日 09:23/ 0 赞/ 11 阅读

相关 js中的事件绑定

js中事件绑定可以使用:attachEvent()函数和addEventListener()函数。 attachEvent()用法：attachEvent(“事件字符串，要

忘是亡心i/ 2022年11月28日 10:38/ 0 赞/ 226 阅读

相关 php 事件绑定,php实现事件绑定

class EventHandle \{ private static $\_map = array(); //类似jquery绑定事件 public function

谁践踏了优雅/ 2022年11月12日 12:54/ 0 赞/ 341 阅读

相关 JavaScript - for循环绑定事件不生效的问题

下面代码是为了实现一个类似相册的功能, 为了加快速度只加载小图, 当用户点击小图的时候才在下面的框中显示对应的大图. 初始的大图是一张空白图片. ![在这里插入图片描述][w

╰半橙微兮°/ 2022年09月04日 09:49/ 0 赞/ 171 阅读

相关 React学习:事件绑定、组件定义、for、map循环-学习笔记

文章目录 React学习:事件绑定、组件定义、for、map循环-学习笔记事件绑定组件定义（参数传递）

朴灿烈づ我的快乐病毒、/ 2022年09月01日 14:48/ 0 赞/ 131 阅读

相关 javascript event for 事件绑定

一直以为<script language /> 是它唯一的属性，今天看到一段代码 <script language="javascript" for="windo

傷城~/ 2022年07月13日 13:15/ 0 赞/ 208 阅读

相关 jQuery中的事件绑定

在页面加载完毕时，程序可以通过为元素绑定事件完成相应的操作。在jQuery中，事件绑定通常可以分为为元素绑定事件、移除绑定和绑定一次性事件处理3种情况，下面分别进行介绍。

浅浅的花香味﹌/ 2022年05月12日 00:38/ 0 赞/ 309 阅读

相关 js动态循环绑定事件的变量问题

在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定，循环对元素的事件进行赋值，在这个过程中我们会遇到一个问题，那就每个元素事件运行的时候变量怎么都是相同的值。这里涉及

女爷i/ 2021年12月12日 23:47/ 0 赞/ 299 阅读

相关 for循环中的事件绑定

html <button>按钮1</button> <button>按钮2</button> <button>按钮3</button>

左手的ㄟ右手/ 2021年09月15日 19:34/ 0 赞/ 430 阅读