利用闭包解决循环注册事件

最新推荐文章于 2021-12-06 22:45:40 发布

~嘘~禁止想象~

最新推荐文章于 2021-12-06 22:45:40 发布

阅读量136

点赞数 2

分类专栏：前端 # JavaScript知识点

本文链接：https://blog.csdn.net/weixin_45773503/article/details/112796658

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript知识点

36 篇文章 0 订阅

订阅专栏

循环注册事件，实现每个 li 元素的点击赋值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

第一种：利用立即执行函数将事件整个包裹，形成作用域块

        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) { //形参
                lis[i].onclick = function() {
                    this.innerHTML = i;
                }
            })(i); //实参
        }

第二种：利用函数表达式，用立即执行函数返回不同的注册函数

        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = (function(i) {
                return function() {
                    this.innerHTML = i;
                }
            })(i);
        }

第三种：利用 let 关键字，形成作用域块

        var lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                this.innerHTML = i;
            }
        }

~嘘~禁止想象~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
利用闭包解决循环注册事件

循环注册事件，实现每个 li 元素的点击赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><b
复制链接

扫一扫

专栏目录