浏览器正在自动分配函数参数的值

Question

我在 javascript 上遇到了一个奇怪的错误，我尝试了不同的方法来解决它，但在这种情况下，它打败了我。这段代码的想法是当用户按下元素标签 h5 '<h5 class="m" id="myelem">Galery of photos</h5>' 时显示可用的照片库，然后网站显示带有 SweetAlert2 和 Bootstrap.

的图库

因此，当我单击 h5 元素时，它会运行名为 sweetCarousel 的函数，该函数会显示照片库。此时我以这种方式调用函数 sweetCarousel.bind(this, ...) 来接收参数，在这种情况下，是来自照片的 URL 。我在 Sweetalert 中注入 HTML 代码。作为条件，警报中的 HTML 会根据我要显示的照片数量而变化。有趣的是，当我只加载一张照片时：

document.getElementById("myelem").addEventListener("click", sweetCarousel.bind(this, "./img/image1.jpg"));

浏览器是这样设置参数值的： img1 = "./img/image1.jpg", img2 = MouseEvent {isTrusted: true, screenX: 449, screenY: 442, clientX: 449, clientY: 339, …}, img3 = ""

所以第一个条件 if (img2.length == 0) { 跳过它并转到第二个条件 if (img3.length == 0) {。我不知道为什么会发生这个错误。我计划在第一个条件中评估代码，因为我只传递了一个图像作为参数

function sweetCarousel(img1, img2 = "", img3 = "") {
  if (img2.length == 0) {
     eee = '<div class=""> <div class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>  </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls -->  </div></div>';
  } else if (img3.length == 0) {
     eee = '<div class=""> <div class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
  } else {
     eee = '<div class=""> <div class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
  }
  Swal.fire( {
    html: eee,
    width: '50%',
    background: "black !important",
    showCloseButton: true,
    showCancelButton: false,
    showConfirmButton: false,
    focusConfirm: false
  });
  $(".carousel").swipe({
    swipe: function(event, direction, distance, duration, fingerCount, fingerData) {

      if (direction == 'left') $(this).carousel('next');
      if (direction == 'right') $(this).carousel('prev');

    },
    allowPageScroll:"vertical"
  });
}

Answer 1

这是预期的行为。当您为 addEventListener() 方法提供事件侦听器时，侦听器必须实现 EventListener 接口。

所以如果你想给监听器提供额外的参数，我建议你使用闭包。

document.getElementById("trigger1").addEventListener("click", eventListener( ["./img/image1.jpg"]).bind(this));

document.getElementById("trigger2").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));

document.getElementById("trigger3").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg","./img/image3.jpg"]).bind(this));


function eventListener(images){
    return function(event){
      console.log('images', images);
      console.log('event', event);
    }
}

<button id="trigger1">Trigger 1</button> 
<button id="trigger2">Trigger 2</button> 
<button id="trigger3">Trigger 3</button>

我还建议您将图像作为数组传递，而不是将它们作为单独的参数传递。通过使用数组，您可以用循环替换 if/else 块以创建更通用的函数。想象一下，您将来要提供 50 张图像，那么您将不得不创建 50 if/else 个块。您可以按以下方式进行：

document.getElementById("trigger").addEventListener("click", eventListener(["./img/image1.jpg", "./img/image2.jpg", "./img/image3.jpg"]).bind(this));


function eventListener(images) {
  return function(event) {

    const indicators = images.map(function(image, index) {
      return `
      <li 
         data-target="#carousel-example-generic" 
         data-slide-to="${index}" 
         ${index === 0 ? `class="active"` : ``}
      ></li>
      `
    })

    const imageItems = images.map(function(image, index) {
      return `
      <div class="item ${index === 0 ? `active` : ``}"> 
        <img src="${image}"> 
      </div>
      `
    })

    const carousel = `
      <div class="">
   <div class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
         ${indicators}
      </ol>
      <div class="carousel-inner" role="listbox">
         ${imageItems}
      </div>
      <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 
   </div>
</div>
      `

    console.log(carousel)
  }
}

<button id="trigger">Trigger</button>

浏览器正在自动分配函数参数的值

Browser is assigning automatically value of a parameter of a function

javascript

function

debugging

sweetalert2