为点击搜索按钮和输入按钮添加事件监听器

Question

我正在尝试将事件侦听器添加到搜索按钮。我已经有了输入按钮的事件侦听器，但希望人们也能够单击搜索按钮。例如，在移动设备上，他们必须这样做。有人可以帮我吗？任何帮助将不胜感激。谢谢

enquiryRef.addEventListener('keypress', checkIfEnter);

function checkIfEnter(event){
  if (event.keyCode === 13) {
    getResults(enquiryRef.value);
  }
}

Answer 1

也将事件侦听器添加到搜索按钮。

searchBtn.addEventListener('keypress', checkIfEnter);

Answer 2

您可以向一个元素添加多个事件侦听器，但是当然您希望在单击时执行的操作与您希望在用户键入 Enter 时执行的操作完全不同，因为不会有 Enter检查的关键。因此，创建另一个函数，比如 userClicked，它只调用 getResults 时的值，就像用户键入 Enter 时的值一样。

enquiryRef.addEventListener('keypress', checkIfEnter);

function checkIfEnter(event){
  if (event.keyCode === 13) {
    getResults(enquiryRef.value);
  }
}

enquiryRef.addEventListener('click', userClicked);

function userClicked(event){
    getResults(enquiryRef.value);
}

根据您的使用情况，您可能希望也可能不希望停止传播点击。

为点击搜索按钮和输入按钮添加事件监听器

Adding a event listener for a click search button as well as the enter button

javascript

onclicklistener

event-listener