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

该函数需要event作为第一个参数。当使用函数本身作为单击处理程序时设置此项，但是当您创建自己的单击处理程序时，需要捕获event并明确传递它：

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

如何使用包含异常的其他参数

1 个答案: