Question

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

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放入数组中，并使用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);

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

2 个答案: