JavaScript Event Listeners：点击按钮或回车触发函数的实现问询

嘿，你的代码逻辑已经能实现目标啦！不过咱们可以做一些优化，让代码更符合现代JS规范，也更健壮。先看看你的原始代码：

function display(){ 
  console.log('itemAdded'); 
}
document.querySelector('.add__btn').addEventListener('click',display);
document.addEventListener('keypress',function(event){ 
  if(event.which == 13 || event.keyCode == 13){ 
    //if 'enter' is pressed 
    display(); 
  } 
});

几个可以优化的点： #

• 用标准的event.key替代废弃属性：event.which和event.keyCode已经被MDN标记为废弃，现在推荐使用event.key，直接判断event.key === 'Enter'更直观易懂。
• 增加元素存在性检查：如果页面中没有.add__btn这个元素，直接调用addEventListener会抛出错误，咱们可以先判断元素是否存在再绑定事件。
• 简化回调逻辑：键盘事件的回调可以写得更简洁，提升代码可读性。

优化后的IIFE版本代码： #

(function() {
  function display() {
    console.log('itemAdded');
  }

  // 绑定按钮点击事件，先检查元素是否存在
  const addBtn = document.querySelector('.add__btn');
  if (addBtn) {
    addBtn.addEventListener('click', display);
  }

  // 绑定回车按键事件
  document.addEventListener('keypress', function(event) {
    // 使用标准的event.key判断回车键
    if (event.key === 'Enter') {
      display();
    }
  });
})();

这样修改后，你的功能完全保留：点击.add__btn按钮，或者按下回车键，都会执行display函数输出itemAdded。而且代码更健壮，即使按钮不存在也不会报错，同时遵循了现代JS的API规范。

内容的提问来源于stack exchange，提问作者Jp Arcilla