Question

作为javascript和jQuery的相对noob，我很好奇是否将2个点击处理程序附加到同一个元素是错误的？我知道我可以做到，但我很好奇这是否违反了最佳做法＆＃39;

示例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，但一切都在实际网站上运行。单击列表菜单中的项目时，它会正确显示您单击的项目。单击带有#all的li时，它会正确显示所有项目并使用一个漂亮的小型幻灯片动画关闭菜单。

是的，它确实有效，但它只是感觉到了＃39;喜欢这样做的错误方法。这是一种可接受的最佳实践方法吗？

当我检测到All被点击时，我也可以触发filter（）函数内的closeMenu（）函数，但是如果上面的方法没问题，那么我宁愿不花时间（实际的网站是相当的）比上面的例子更复杂，所以我必须在很多地方这样做。）

Answer 1

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

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

Answer 2

这种方法没有错。

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

将两个点击处理程序附加到同一个元素是否“可以”？

2 个答案: