Combining mouse click and enter key press in the same event listener

Question

I have a div that I made focusable with tabindex, and I want it to act like a button, doing something on both mouse click and enter key press. Can you do this with a single event listener, combining the following into one?

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

You can put the events to handle in an Array and use forEach to add the event listener to the element.

<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>

You can also define a function that both of the event listeners call.

<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>