处理JavaScript中按钮点击的最佳方式(香草)

编辑:我的问题可能过于广泛(仍在学习),但我收到了非常有用的答案.非常感谢你们的投入.我还纠正了我的代码以包含传递'事件'.

这是我在这里提出的第一个问题,所以我有点紧张......

我们走了:管理点击按钮并让它们触发不同功能的最佳方法(关于最佳实践,速度,兼容性等)是什么？

在研究这个问题时,我找到了一个关于Eloquent Javascript的例子并将其作为基础.

然后我通过使用"mapper"(这是正确的术语？)来扩展它,以找到正确的函数,具体取决于触发事件的按钮的id.

这是代码:

// functions I want to trigger
function one(e) {
  alert("You clicked " + e.textContent);
}

function two(e) {
  alert("You clicked " + e.textContent);
}

// mapper object to hold my functions
var buttOnMap= {
  b_one: function(event) {
    one(event.target)
  },
  b_two: function(event) {
    two(event.target)
  }
}

// Event Listener
var buttOnClick= document.body.addEventListener('click', function(event) {
  if (event.target.nodeName == "BUTTON") {
    var tar = event.target.id;
    buttonMap[tar](event)
  }
});

Button One
Button Two