轮播图点击按钮无效：为什么我的`onclick`事件中的`this`指向了`window`而不是按钮？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《轮播图点击按钮无效：为什么我的`onclick`事件中的`this`指向了`window`而不是按钮？ 》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

轮播图点击按钮不能切换图片，绑定的 onclick 事件中 this 却指向了 window？

问题描述：

轮播图中，小圆点按钮点击后不能切换对应的图片，并且绑定的 onclick 事件中的 this 总是指向 window 而不是当前按钮。

分析：

根据提供的代码，我们可以发现以下几点：

• 小圆点按钮的 onclick 事件绑定如下：

points[i].onclick = function () {
  index = this.index
  chageall();
};

• 当小圆点按钮被点击时，this 指向了 window，导致无法访问当前按钮的 index 属性。

原因：

该问题可能是由箭头函数引起的。箭头函数的 this 不是指向函数被调用的对象，而是指向定义函数时所在的上下文环境，在本例中即指向 window。

解决方案：

为了解决此问题，可以通过以下两种方法之一：

• 使用常规函数：将小圆点按钮的 onclick 事件修改为常规函数，这样 this 将指向按钮元素。

points[i].onclick = function () {
  chageall(i);
};

function chageall(index) {
  // ...
}

• 使用箭头函数时绑定 this：使用箭头函数时，可以通过 bind() 方法将 this 绑定到按钮元素。

points[i].onclick = function () {
  chageall.bind(this, i)();
}.bind(points[i]);

完整代码：

经过修改后，完整的代码如下：

/*
 * 需求
       1. 默认自动轮播状态  小圆点跟随推片变化而变化
       2. 触发状态  当鼠标悬浮小圆点发生样式改变并且不在轮播
               当鼠标进行点击的时候，对应小圆点的图片发生改变
       3.鼠标悬浮左右按键的时候，图片不在轮播
           当点击的时候，会根据当前图片的位置发生往后或往前的变化        
 */
window.onload = function () {

  //1.进行元素的获取 
  // 获取图片
  let imgs = document.querySelectorAll("#img-list li ");
  // 获取小圆点
  let points = document.querySelectorAll("#points a");
  // 获取左右按钮
  let btns = document.querySelectorAll(".btn");
  // 定义当前显示的下标
  let index = 0;
  // 定义timer
  let timer;

  //2.设计方法让所有的图片隐藏
  function hiddenImages() {
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].style.opacity = 0;
    }
  }


  //  3.设计方法让所有的小圆点处于隐藏的状态
  function hiddenPoints() {
    for (let i = 0; i < points.length; i++) {
      points[i].className = "hd";
    }
  }


  // 4.设计方法让小圆点显示和图片的显示都处于隐藏状态并且根据当前设置的下标来进行显示
  function chageAll(i) {
    hiddenImages();
    hiddenPoints();
    imgs[i].style.opacity = 1;
    points[i].className = "highlight";
  }


  // 5.设计轮播方法
  function carousel() {
    timer = setInterval(function () {
      chageAll(index);
      index++;
      // 判断如果下标超出了就回到第一张
      if (index > imgs.length - 1) {
        index = 0;
      }

    }, 3000)
  }
  carousel();

  // 6.进行小圆点的触发
  for (let i = 0; i < points.length; i++) {

    // 悬浮进行定时器停止
    points[i].onmouseover = function () {
      clearInterval(timer);
    };
    // 鼠标离开继续轮播
    points[i].onmouseout = function () {
      carousel();
    };

    points[i].index = i;

    points[i].onclick = chageAll.bind(points[i], i);
  }



};

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~