jquery - 将两个单击处理程序附加到同一元素是否为 'ok'？

Question

作为 javascript 和 jQuery 的相对菜鸟，我很好奇将 2 个单击处理程序附加到同一元素是否是错误的？我知道我可以做到，但我只是好奇这是否违反“最佳实践”

示例 HTML:

<ul>
    <li id="all"   class="click_listener"> All Items </li>
    <li id="item1" class="click_listener"> Item 1    </li>
    <li id="item2" class="click_listener"> Item 2    </li>
    <li id="item3" class="click_listener"> Item 3    </li>
</ul>

示例 jQuery(已准备好文档):

$(".click_listener").click(
    function() {
       var productCode = $(this).id;
       filter(productCode);
    }
);

$("#all").click(
    function() {
       closeMenu();
    }
);

其他 jQuery 函数:

function filter(productCode) {
    // Displays selected product, or if 'all' was passed in, displays all products.
}

function closeMenu() {
    // Closes the menu by slideUp-ing the parent <ul>
}

在我尝试简化代码的过程中，我可能犯了一个或两个错误，但一切都在实际站点上运行。当您单击列表菜单中的某个项目时，它会正确显示您单击的项目。当您单击 id 为 #all 的 li 时，它会正确显示所有项目并以漂亮的小幻灯片动画关闭菜单。

所以，是的，它有效，但它只是“感觉”像是错误的方法。这是可接受的最佳实践方法吗？

当我检测到单击了“全部”时，我还可以触发 filter() 函数内的 closeMenu() 函数，但如果上述方法没问题，那么我宁愿不花时间(实际站点要复杂得多)比上面的例子，所以我必须在很多地方这样做)。

Answer 1

这并没有错。事实上，让每个 javascript“组件”设置它自己的事件处理程序是一个很好的做法。因此，您可能会拥有不同的 javascript 文件，这些文件可能会添加事件处理程序。这比仅仅为了避免出现偶数处理程序而手动合并代码要好。

换句话说，做最清楚的事情。