结合鼠标单击并在同一事件侦听器中输入按键

Question

我有一个div，可以通过tabindex使其聚焦，并且我希望它像按钮一样，在单击鼠标和输入键时都做一些事情。 您可以使用单个事件侦听器将以下内容组合为一个吗？

document.getElementById("myId").addEventListener("click", function() {
    console.log("click");
});
document.getElementById("myId").addEventListener("keyup", function(e) {
    if(e.keyCode === 13) {
        console.log("click");
    }
});

Answer 1

您可以将events放在Array中处理，并使用forEach将事件侦听器添加到元素。

 <div tabindex="-1" style="width: 100px; height: 100px; border: 1px solid black; background-color: #f0f"></div> <script> var div = document.querySelector('div'); ["click", "keypress"].forEach(ev=>{ div.addEventListener(ev, function(e){ if(ev=="click"){ console.log("click");//clicked } if(e.keyCode==13){ console.log("click");//enter key pressed } }); }); </script> 

您还可以定义两个事件侦听器都调用的函数。

 <div tabindex="-1" style="width: 100px; height: 100px; border: 1px solid black; background-color: #f0f"></div> <script> var div = document.querySelector('div'); ["click", "keypress"].forEach(ev=>{ div.addEventListener(ev, handleEvent); }); function handleEvent(e){ if(e.type=="click"){ console.log("click");//clicked } if(e.keyCode==13){ console.log("click");//enter key pressed } } </script> 

Answer 2

不，您需要使用两个侦听器，但是由于您必须将一个函数传递给被调用的侦听器并获取所有必要的参数，因此您可以为两种情况创建一个函数，如下所示：

function handleEvent(e){
   if(e //make sure a mouseEvent has been passed as argument
       &&
      e.keyCode === 13 //check for the correct key
   ){
      console.log("click");
   }
}

document.getElementById("myId").addEventListener("click", handleEvent);
document.getElementById("myId").addEventListener("keyup", handleEvent);