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

Question

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

---

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

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

在研究这个问题时,我找到了一个关于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 id="b_one" type="button">Button One</button>
<button id="b_two" type="button">Button Two</button>

这个解决方案好吗？怎么改进？我可能遇到任何问题吗？

小小的奖励问题:另外,我想把整个东西包裹起来document.addEventListener("DOMContentLoaded", function() {}).

这是个好主意还是需要？在什么情况下我应该检查是否加载了DOM内容以及何时可以省略此检查？

Answer 1

您已经创建了一个简单的事件委托，它使您能够添加/删除按钮，而无需添加/删除事件处理程序。

如果您有很多动态创建或销毁的按钮，最好使用事件委托，而不是支付手动管理处理程序的成本。

您可以将事件处理代码放在正文的末尾，而不是使用事件DOMContentLoaded。只要容器（body在本例中）存在，子级是否存在并不重要。

如果可以的话，将全局事件处理程序附加到最近的容器，而不是主体。此外，使用data-*属性而不是id或value属性向按钮添加数据。Anid创建一个全局变量，其值将在表单中使用。

<div class="buttonsContainer">
  <button type="button" data-value="one">Button One</button>
  <button type="button" data-value="two">Button Two</button>
</div>

您应该将事件对象传递给事件处理程序：

var buttonClick = container && container.addEventListener('click', 
    function(event) {
      var target = event.target;
      var handler;
      if (target.nodeName == "BUTTON" && (handler = target.getAttribute('data-handler'))) {
        buttonMap[handler](event)
      }
    });

演示：

<div class="buttonsContainer">
  <button type="button" data-value="one">Button One</button>
  <button type="button" data-value="two">Button Two</button>
</div>

var buttonClick = container && container.addEventListener('click', 
    function(event) {
      var target = event.target;
      var handler;
      if (target.nodeName == "BUTTON" && (handler = target.getAttribute('data-handler'))) {
        buttonMap[handler](event)
      }
    });