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

最新推荐文章于 2022-12-06 13:28:21 发布

Charonmomo

最新推荐文章于 2022-12-06 13:28:21 发布

阅读量1.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Charonmomo/article/details/119651909

版权

前端专栏收录该内容

56 篇文章 2 订阅

订阅专栏

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

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <h2>美女画廊</h2>
    
    <div id="imagegallery">
        <a href="images/1.jpg" title="美女A" >
            <img src="images/1-small.jpg" alt="美女1">
        </a>
        <a href="images/2.jpg" title="美女B">
            <img src="images/2-small.jpg"  alt="美女2">
        </a>
        <a href="images/3.jpg" title="美女C" >
            <img src="images/3-small.jpg"alt="美女3">
        </a>
        <a href="images/4.jpg" title="美女D" >
            <img src="images/4-small.jpg" alt="美女4">
        </a>
    </div>

    <!-- 清除浮动 -->
    <div style="clear:both"></div>  

    <!-- 先展示一张空白的图片 -->
    <img id="image" src="images/placeholder.png" alt="" width="450px">

    <p id="des">选择一个图片</p>

    <script>
        //获取元素
        var imagegallery = document.getElementById("imagegallery");
        var links = imagegallery.getElementsByTagName("a");
        var image = document.getElementById("image");
        var des = document.getElementById("des");

        //遍历数组, 添加点击时间
        for(var i=0; i<=links.length-1; i++){
            links[i].onclick = function(){
                //更改image的 src
                image.src = links[i].href;

                // 更改des内部的文字内容a
                des.innerText = links[i].title;

                //取消a元素的跳转效果
                return false; 

            };
        }

    </script>
</body>
</html>

上面的代码中, 遍历数组给每个<a>标签都绑定单机时间, 看起来没什么问题, 但是在页面中却发现:

当点击小图的时候, 图片并没有显示在我们希望出现的大图中, 用于消除<a>标签跳转的return false语句也没有生效, 而是直接打开了<a>标签中的src路径 (比如images/1.jpg).

这是因为:
在触发 for 循环内部添加的绑定事件时，所有的批量添加的事件已经成功，触发事件时都是在循环结束之后. 批量绑定的事件的事件函数内部如果有变量 i，要注意，函数执行时已经是在循环结束后.

循环内部定义的变量是一个全局变量，在循环后执行的 i 变量的值是 i 跳出循环时的值.
在这里插入图片描述
所以这里用 links[i] 是选不到绑定的 <a> 标签的, 这里应该用 this , this 指向的是 onclicke 前面的事件源 links[i]

        for(var i=0; i<=links.length-1; i++){
            links[i].onclick = function(){
                //更改image的 src
                image.src = this.href;

                // 更改des内部的文字内容a
                des.innerText = this.title;

                //取消a元素的跳转效果
                return false; 

            };
        }

这样就可正确将下面大图的 src 改为当前 <a> 标签中的 href 了.
在这里插入图片描述