4

作为 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>
}

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

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

当我检测到所有被点击时，我也可以在 filter() 函数中触发 closeMenu() 函数，但是如果上面的方法是好的，那么我宁愿不花时间（实际的站点比上面的要复杂得多例如，所以我必须在很多地方这样做）。

4

2 回答 2

3

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

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

于 2013-06-20T03:46:08.280 回答
1

这种方法没有任何问题。

这种方法更具可读性和可理解性，否则您将在单击处理程序中添加更多条件以检查它是否是all元素然后调用特定方法

于 2013-06-20T03:46:15.867 回答