js给列表添加点击事件的异步问题

最新推荐文章于 2022-09-13 20:22:09 发布

#咸菜

最新推荐文章于 2022-09-13 20:22:09 发布

阅读量955

点赞数 3

分类专栏： javascript 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/qq_44850230/article/details/120899859

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js给列表添加点击事件的异步问题</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        var divs = document.querySelectorAll('div');
        console.log(divs);
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.color = 'yellow';
            divs[i].onclick = function() {
                divs[i].style.color = 'red';
            }
        }
    </script>
</body>

</html>

执行以上代码，点击div元素会出现如下问题，原因是当手动触发一个 click 事件时，事件当回调函数会被异步执行。此时绑定在这个事件上的所有回调函数会依次被加入任务队列。变量i的作用域为for循环内部；对于οnclick=function(){}来说，它属于父亲作用域，对于异步监听的onclick函数，声明的时候并未执行函数体（即：未执行divs[i].style.color = ‘red’;）而是在点击时触发执行函数体，此时父亲作用域的变量i已经变为divs的长度，因此对于div元素的每个点击事件来讲，i 都是同一个值，即divs的长度。
在这里插入图片描述

解决方法：

用this指针对元素进行操作

for (var i = 0; i < divs.length; i++) {
            divs[i].style.color = 'yellow';
            divs[i].onclick = function() {
                this.style.color = 'red';
            }
        }

为什么this指针指向的是正确的元素呢？
普通函数的this指针指向：
1.直接调用函数的指向window
2.通过对象进行调用对象的方法，指向调用者
而在上面的案例中，this指向的便是onclick的调用者divs[i](声明部分)

可以使用let关键字。var的作用域是会提升的，var声明的变量只能是全局的或者是整个函数块的。也就是说，在一个function中，不管在哪个位置定义了var 变量，它的作用域都相当于整个function函数块，例如上面for循环中，定义的i为全局变量，最后使用的时候是i的最终值。let允许声明一个作用域被限制在块级中的变量、语句或者表达式.

for (let i = 0; i < divs.length; i++) {
            divs[i].style.color = 'yellow';
            divs[i].onclick = function() {
                divs[i].style.color = 'red';
            }
        }

使用闭包 (function(n){ return function(){ } })(i);
什么是闭包？
详情见什么是闭包
jQuery一步到位 jQuery的优点体现出来了

$("div").click(function() {
            this.style.color = 'red';
        })

#咸菜

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js给列表添加点击事件的异步问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js
复制链接

扫一扫

专栏目录