为什么我的事件监听器不在函数内部工作？答案

【问题标题】：Why isn't my event listener working inside the function?为什么我的事件监听器不在函数内部工作？
【发布时间】：2016-06-23 23:34:08
【问题描述】：

我有一个用 JavaScript 制作幻灯片的函数。在尝试添加功能时，通过单击淡入淡出更改幻灯片，我的功能停止工作，有什么问题？完整代码on Khan Academy

var slideShow = function(container, time, effect) {
  container = document.querySelector(container);
  this.images = [];
  this.curImage = 0;

  if (effect === "click_fade") {
    for (i = 0; i < container.childElementCount; i++) {
      this.images.push(container.children[i]);
      this.images[i].style.opacity = 0;
    }

    // Handle going to to the next slide
    var nextSlideClick = function() {
      for (var i = 0; i < this.images.length; i++) {
        if (i != this.curImage) this.images[i].style.opacity = 0;
      }
      this.images[this.curImage].style.opacity = 1;
      this.curImage++;
      if (this.curImage >= this.images.length) this.curImage = 0;
      window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
    };
    container.addEventListener("click", nextSlideClick)

  }

  nextSlide.call(this);

};
slideShow("#slideshow", 2000, "click_fade");

.slide {
  transition: opacity 0.5s;
  position: absolute;
  top: 0;
}

<div id="slideshow">
  <img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
  <img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
  <img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
  <img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
  <img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />

</div>

没有结果，怎么了？

【问题讨论】：

最好准确地指出您所做的更改、具体发生/未发生的情况以及您采取了哪些调试步骤。我总是警惕 this 的肆意使用，尤其是稍后运行的 wrt 处理函数引用 this。
编辑了，去这里？ en.khanacademy.org/computer-programming/…

标签： javascript html dom-events addeventlistener slideshow

【解决方案1】：

您可以尝试以下方法：

<style>
   .slide {
  transition: opacity 0.5s;
  position: absolute;
  top: 0;
}
</style>

<div id="slideshow">
     <img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
   <img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
   <img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
   <img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>

<script>
    var slideShow = function(container, time, effect) {
    container = document.querySelector(container);
    this.images = [];
    this.curImage = 0;

  if (effect === "click_fade") {
  for (i = 0; i < container.childElementCount; i++) {
        this.images.push(container.children[i]);
        this.images[i].style.opacity = 0;
    }

    // Handle going to to the next slide
    var nextSlideClick = function() {
    for (var i = 0; i < this.images.length; i++) {
            if (i != this.curImage) this.images[i].style.opacity = 0;
      }
        this.images[this.curImage].style.opacity = 1;
        this.curImage++;
        if (this.curImage >= this.images.length) this.curImage = 0;
    window.setTimeout(nextSlideClick.bind(document.getElementById(this)), time);
        };
        container.addEventListener("click", nextSlideClick)

  nextSlideClick.call(this);
}
};
slideShow("#slideshow", 2000, "click_fade");
</script>

在这个 jsfiddle 中做了一些小的改动：Here

【讨论】：

我在答案中添加了一个 jsfiddle
但它会自动运行，点击不会做任何事情
那是因为单击容器时“this”没有值。您需要将其保存在幻灯片功能块之外的变量中。我已经用解决方案更新了 jsfiddle。
非常感谢！是否可以不让它们自动滑动？对不起，如果我让你很难过
抱歉回复晚了。这是单击jsfiddle.net/gummiah/8094k13e 时幻灯片放映的解决方案，我建议为此使用jquery。少了很多代码。