javascript - 如何在包含事件的情况下使用其他参数

Question

我有这个功能:

function searchItem(e, pageNumber){
  e.preventDefault();
  searchString = searchBox.value;
  article = document.getElementById("homeSection");
  var xmlhttp = getXmlHttpRequestObject();
  var string = '';
  if(xmlhttp){
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var response = JSON.parse(xmlhttp.responseText);
        for(var i=0; i<response.length; i++){
          var price = parseFloat(response[i].Price);
          string += '<section class="searchResult">';
          string += '<p class="photo"><img src="' + response[i].Photo + '"></p>';
          string += '<section>';
          string += '<h1 class="name">' + response[i].Name + '</h1>';
          string += '<p class="price">£' + price.toFixed(2) + '</p>';
          string += '<p class="description">' + response[i].Description + '</p>';
          string += '<p class="productID">ID: ' + response[i].ID + '</p>';
          string += '<p class="quantity">Quantity: ' + response[i].Quantity + '</p>';
          string += '</section>';
          string += '</section>';
          if(pageNumber != 1){
            string += '<section><button id=previousPage>Previous</button><button id=nextPage>Next</button></section>';
          }
        }
        article.innerHTML = '<h1>Search</h1><section><h1 class="bottomBorder">You searched for: "' + searchString + '"</h1></section>';
        article.innerHTML += string;
      }
    };
    xmlhttp.open("POST", "search.php?search=" + searchString, false);
    xmlhttp.send("&rpp=" + rowsPerPage + "&last=" + lastPage + "&page=" + pageNumber);
  }
}

我很好奇的是如何调用该函数，因为它需要一个事件。 当我在 javascript 事件处理程序中使用它时，它工作得很好:

searchButton.addEventListener("click", searchItem);

但是当我尝试使用这样的参数调用函数时，它不起作用，它告诉我 e 未定义:

searchButton.addEventListener("click", function(){
  searchItem(1);
});

我确实理解这一点，因为我还没有传递 e 的参数，但我想知道为什么它作为一个没有伪函数的事件工作，以及我应该如何用伪函数调用它功能。

Answer 1

该函数需要事件作为第一个参数。这是在使用函数本身作为点击处理程序时设置的，但是当您创建自己的点击处理程序时，您需要捕获事件并显式传递它:

searchButton.addEventListener("click", function(e){
  //                 capture the event object--^
  searchItem(e, 1);
  //         ^ pass it to the function
});