编辑:我的问题可能过于宽泛(仍在学习)，但我仍然收到了非常有用的答案。非常感谢大家的意见。我还更正了我的代码以合并传递“事件”。
这是我在这里问的第一个问题，所以我有点紧张......
开始吧:管理按钮点击并让它们触发不同功能的最佳方法是什么(关于最佳实践、速度、兼容性等)？
在研究这个问题时，我在 Eloquent JavaScript 上找到了一个例子并以此为基础。
然后我扩展了它，通过使用“映射器”(这是正确的术语吗？)根据触发事件的按钮的 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 内容，什么时候可以省略此检查？
您已经创建了一个简单的事件委托(delegate)，使您能够添加/删除按钮，而无需添加/删除事件处理程序。
如果您有很多动态创建或销毁的按钮，最好使用事件委托(delegate)，而不是支付手动管理处理程序的成本。
您可以将事件处理代码放在主体的末尾，而不是使用 DOMContentLoaded 事件。只要容器(在本例中为 body)存在，子项是否存在并不重要。
将全局事件处理程序附加到最近的容器，如果可以，不要附加到主体。此外，使用 data-* 属性代替 id 或 value 属性向按钮添加数据。 id 创建一个全局变量，值将在表单中使用。
<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)
}
});
演示:
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 container = document.querySelector('.buttonsContainer');
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-handler="b_one">Button One</button>
<button type="button" data-handler="b_two">Button Two</button>
</div>