在“ addEventListener”内部调用函数时，该函数不起作用

Question

我正在尝试在网页中进行幻灯片放映。

我创建了下一个和上一个按钮，用于以不同方式更改图像。下一个按钮有效，但上一个按钮无效。图像的显示属性默认设置为无。

var nextbutton = document.querySelector(".next");
var prevbutton = document.querySelector(".prev");
var slide = document.querySelectorAll('.slideshow');
var slideindex = 1 ;

var show = function(n){
  var i;
  if (n > slide.length) { slideindex = 1};
  if (n < 1) {slideindex = slide.length};
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  };
  slide[slideindex-1].style.display = "block";

};

var cl = function(p) {
  show(slideindex += p);
};

/* next button is working */
nextbutton.addEventListener("click", function(){
  show(slideindex += 1 );
} );

/* previous button is not working */
prevbutton.addEventListener("click" , cl(-1));

.slideshow {
  width:100%;
  height: 500px !important ;
  border-radius: 7px;
  display: none;
 }

<section class="content-head">
        <div class="container">
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_woods_wide.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_5terre.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_mountains.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_lights.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_nature.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_snow.jpg">
            </div>
        </div>
        <div class="button container">
            <a class="prev">&#10094;</a>
            <a class="next">&#10095;</a>
        </div>
      </section>

Answer 1

prevbutton.addEventListener("click" , cl(-1));

这在绑定事件时立即调用该函数，而不是在事件触发时调用该函数。绑定下一个按钮事件时，可以避免此错误。

更改为：

prevbutton.addEventListener("click", evt => cl(-1));

或

prevbutton.addEventListener("click", function(evt) { cl(-1); });

Answer 2

您也可以这样做：

prevbutton.addEventListener("click", cl.bind(null, -1));

为什么你一个人没工作？

prevbutton.addEventListener("click", cl(-1));

等效于：

let theReturnValue = cl(-1);
prevbutton.addEventListener("click", theReturnValue);

JavaScript调用cl(-1)并将返回值传递给addEventListener

为什么该解决方案有效

解决方案使用了Function.prototype.bind，您可以查找它，但它等效于：

prevbutton.addEventListener("click", function(...args) {
  cl.call(null, -1, ...args);
});

详细绑定

参数：fn.bind(thisArg[, ...args])

fn

该功能。

thisArg

函数this（在这种情况下为fn）中cl的值

... args

可选。该函数的预定义参数。调用时给定的所有其他参数将放在这些参数之后。