Question

我目前正在决定使用事件处理程序生成HTML的两种不同方法。我知道这两种方法都是可行的（我以前看过两种方法都有用），但我不清楚它们各自的优点，因为我会被困在我选择的任何一种方法中，我希望有人能够澄清这些优点。我

这是一个简单的例子来解释这个想法（虽然我的真实案例当然会更复杂）。假设我们想要一个提醒“Hello Bob”的按钮。第一种方法是使用我们的视图逻辑来生成HTML，然后依赖于一个单独的高级事件处理程序：

$('body').append('<button class="nameAlert" data-name="Bob">Click me</button>')

$('body').on('click .nameAlert', function(e) {
    alert('Hello ' + $(e.target).data('name'));
})

第二种方法是构建一个元素对象，将处理程序绑定到它，然后立即将它附加到DOM：

var $button = $('<button>Click me</button');
var name = "Bob";
$button.on('click', function(e) {
    alert('Hello ' + name);
});
$('body').append($button);

后一种方法有一些明显的优点（例如，没有写入数据属性，所有逻辑都是一个地方），但我真的很好奇非显而易见的优点（例如，如果我们第一个版本表现更好结束了页面上的很多这些按钮）。我特别对可维护性感兴趣（这应该是程序员的首要任务，对吧？）。

提前感谢您的帮助。

Answer 1

我认为你所询问的是事件授权。事件委托允许您在父DOM元素上绑定事件处理程序并处理其中发生的事件。这种模式有许多好处，而不是最重要的是重复性较低的代码：

的效率即可。浏览器不必将事件处理程序附加到多个dom元素。
内存泄漏。它有助于避免由dom元素从DOM中删除而导致的内存泄漏，这些元素仍然有一个引用它们的javascript对象。由于您的父元素通常在其子元素发生更改时保留在DOM中，因此不会发生这种情况。
实时绑定。事件委托将触发与委托选择器匹配的任何后代节点，这意味着它们可以在事实之后添加并仍然有效。

我确信还有其他好处，但这些是选择事件委派的一些主要原因。

将HTML生成耦合/解耦合到事件处理有什么好处？

1 个答案: