Javascript 将多个jQuery.on（）替换为一个

我有一个具有各种功能的动态插件，我用点击事件触发这些功能

我的HTML：

<div class="container">
    <div class="el" id="el1">
        <a href="#" class="edit-el">Edit</el>
        <a href="#" class="delete-el">Delete</el>
    </div>
</div>

问题：是否可以优化此代码，使我没有两个单击事件侦听器？这应该能让我了解我想要实现的目标（不工作）：

---

试试这个代码。获取目标元素并比较它的

href

$('.container').on('click', function(e){
    var control = $(e.target);
    if ( control.hasClass('edit-el')) {
        plugin.editEl(elId);
    }
    else if ( control.hasClass('delete-el')) {
        plugin.deleteEl(elId);
    }
});

---

试试这个代码。获取目标元素并比较它的

href

$('.container').on('click', function(e){
    var control = $(e.target);
    if ( control.hasClass('edit-el')) {
        plugin.editEl(elId);
    }
    else if ( control.hasClass('delete-el')) {
        plugin.deleteEl(elId);
    }
});

你可以用

但是，我建议您坚持现有的方法，因为您可以使用

---

但是，出于原则，我建议您坚持现有的方法，我不会用优化的代码来回答这个问题，因为我认为您的代码已经是最优的了。原因归结为一个简单的短语——关注点分离。发件人：

在计算机科学中，关注点分离（SoC）是一种设计原则，用于将计算机程序划分为不同的部分，以便每个部分处理一个单独的关注点

目前，您有两个完全独立的功能领域：

• 管理元素编辑的事件处理程序
• 管理元素删除的事件处理程序

---

将两者放在同一个处理程序下的“好处”是代码会稍微短一些。作为回报，您将把两个完全不同的函数合并到一个过程中，并影响可读性和可维护性。

我不会用优化的代码来回答这个问题，因为我认为您的代码已经是优化的。原因归结为一个简单的短语——关注点分离。发件人：

在计算机科学中，关注点分离（SoC）是一种设计原则，用于将计算机程序划分为不同的部分，以便每个部分处理一个单独的关注点

目前，您有两个完全独立的功能领域：

• 管理元素编辑的事件处理程序
• 管理元素删除的事件处理程序

---

将两者放在同一个处理程序下的“好处”是代码会稍微短一些。作为回报，您将把两个完全不同的函数合并到一个过程中，并影响可读性和可维护性。

由于关注点分离原则，我将坚持使用多个独立的事件处理程序。使用

this

而不是

e.currentTarget

很简单，由于关注点分离原则，我将坚持使用多个单独的事件处理程序。使用

this

而不是

e.currentTarget

很简单，我认为你是对的。原因是，如果我为锚链接添加另一个图标跨度，例如currentTarget将不正确。除了我当前版本的代码之外，不要认为有一个可靠的解决方法，所以我会坚持下去。谢谢不同意，在这种情况下，单事件处理程序是正确的方法。“编辑”和“删除”或“其他”都只是单击链接，然后进一步发送正确的操作。所以这里没有任何东西是混合的，编辑和删除在

plugin.

级别上仍然是完全分开的。在这种情况下，使用单独的事件处理程序是错误的，也是不太理想的。我认为你是对的。原因是，如果我为锚链接添加另一个图标跨度，例如currentTarget将不正确。除了我当前版本的代码之外，不要认为有一个可靠的解决方法，所以我会坚持下去。谢谢不同意，在这种情况下，单事件处理程序是正确的方法。“编辑”和“删除”或“其他”都只是单击链接，然后进一步发送正确的操作。所以这里没有任何东西是混合的，编辑和删除在

plugin.

级别上仍然是完全分开的。在这种情况下，使用单独的事件处理程序是错误的，也是不太理想的。

$('.container').on('click', function(e){
    var control = $(e.target);
    if ( control.hasClass('edit-el')) {
        plugin.editEl(elId);
    }
    else if ( control.hasClass('delete-el')) {
        plugin.deleteEl(elId);
    }
});

$('.container').on('click', function(e){
    var control = $(e.target);
    if ( control.is('.edit-el')) {
        plugin.editEl(elId);
    }
    else if ( control.is('.delete-el')) {
        plugin.deleteEl(elId);
    }
});