0

假设我正在动态生成一些控件（使用 jQuery 的示例）：

for (var c=0 ; c<100 ; c++) {
  $(body).append('<input id="btn_'+c+'" type="button" value="Button #'+c+'" />');
}

而且我希望他们根据点击哪个按钮（鼠标悬停等）有不同的操作，附加处理程序的最佳做法是什么，以便它知道正在点击哪个按钮？我可以想到 3 种选择：

  1. 将相同的处理程序（通过 javascript）附加到所有按钮，并让处理程序解析元素 id 以确定单击哪个
  2. 在为控件生成 HTML 时添加处理程序内联（即有 onclick="do_something('+c+');"）
  3. 为在处理程序参数中设置了按钮编号的每个元素附加不同的处理程序（例如，使用循环）

哪种方法更受欢迎，或者还有其他选择吗？

编辑：

抱歉，但我可能应该提到生成元素的数量是可变的，并且处理程序只需要按钮编号（即，每个按钮不是完全不同的处理程序函数）。一个简单的示例用例是您希望用户订购的通过 ajax 抓取的列表，在这种情况下，处理程序只需要列表的索引号。

对于具有不同处理程序的固定数量的元素，大卫的回答是有道理的。

4

2 回答 2

1

在这种情况下，我会说事件委托是首选：

$('body').on('click', 'input', function(e) {
    // do something with this (the element that was clicked)
    console.log(this.value);
});

这样，只有一个事件侦听器附加到按钮的父级（body在本例中），但您仍然可以访问在处理程序中单击的按钮元素。

您可以 f.ex 将操作映射到按钮，如下所示：

for (var c=0 ; c<100 ; c++) {
    $('body').append('<input id="btn_'+c+'" type="button" value="Button #'+c+'" />');
}

var actions = {
    btn_0: function() {
        console.log('btn 0 clicked');
    },
    btn_1: function() {
        console.log('btn 1 clicked');
    }
    // etc...
};

$('body').on('click', 'input', function(e) {
    $.isFunction(actions[this.id]) && actions[this.id].call(this);
});
于 2013-02-20T20:16:48.643 回答
0

方法 1 最灵活。David 提到的“事件委托”也只是您方法 1 的一种变体（如果您将 Object 键转换为函数参数）。与其他事件赋值一起使用时，可以灵活地开启/关闭对同一对象的不同处理。您还可以更好地处理“事件传播”。

方法 2 简单但功能有限，与其他方法（如 jQuery）一起使用注册事件处理程序时有点奇怪。一篇关于内联处理程序的好文章：https ://www.htmlgoodies.com/html5/javascript/working-with-inline-event-handlers.html

方法 3 的性能听起来很糟糕，因为该函数必须多次编译，并且会使您的代码更难维护。

于 2020-03-07T13:31:09.593 回答