Question

为按钮点击事件设置多个处理程序是否更好，或者是否适合将点击处理程序与switch语句结合使用？这在我的代码中有效，但我想知道，有没有更酷的，更多的JQuery-istic方法呢？

<html>
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
    <button id="button3">Button 3</button>
</html>

哪个更好，这个？

$('button').click(function(){
    switch(this.id){
        case "button1": 
            alert("Do what button 1 says");
            break;

        case "button2":
            alert("Do what button 2 says");
            break;

        case "button3":
            alert("Do what button 3 says");
            break;
    }
});

或者这个，

$('#button1').click(function(){
    alert("Do what button 1 says")
});

$('#button2').click(function(){
    alert("Do what button 3 says")
});

$('#button3').click(function(){
    alert("Do what button 3 says")
});

......或者没有区别？

Answer 1

这一切都取决于事件处理程序。如果处理程序之间存在共享代码，并且只有一小部分是特定的，则可以区分处理程序内的按钮。
如果每个按钮处理程序完全不同，为什么要将三个不相关的函数放在一个？

您还可以创建功能图：

var handlers = {
    id1: function() {
        // ...
    },
    id2: function() {
        //...
    }
};

只需使用handlers[this.id]()调用函数。

最后，你为每个元素分配一个偶数处理程序，所以更多的是你想要如何构建你的代码（这或多或少是个人偏好）。

Answer 2

您的第一种方法是按button标记查找按钮元素，它会将click e事件处理程序附加到所有按钮元素。

第二种方法会在每个按钮上找到每个按钮，并将click事件处理程序附加到每个按钮元素。

所以基本上没有区别。

如果你想优化它，那么on只能使用一个事件处理程序。

$(document).on('click', 'button', function(){
    switch(this.id){
        case "button1": 
            alert("Do what button 1 says");
            break;

        case "button2":
            alert("Do what button 2 says");
            break;

        case "button3":
            alert("Do what button 3 says");
            break;
    }
});

这样它只会在文档上附加一个事件处理程序，并在触发click事件时查找button选择器。

请注意，代替document，最好将事件附加到页面上始终存在的任何父元素容器上。

参考 - http://api.jquery.com/on/

Answer 3

所有的东西Javascript，可维护性和可读性都应该考虑在内。有了这个说，除了别的什么，我总是更喜欢后者，因为你已经鼓励代码专注于每个单独按钮的功能......通常在任何UI中，任何给定的按钮都会有一个非常特定的目的。

Answer 4

对于您的示例，除了id之外，您可以将所有消息存储到数组中并向您的按钮添加类.button。我们的想法是在click()上提取id并从数组中获取正确的消息。类似的东西：

var alerts = ['Hello', 'There', 'World'],
    $buttons = $('.button');

$buttons.click(function(){
    var n = this.id.match(/\d+/); // Assuming that id is `buttonX`...
    alert(alerts[n-1]);
});

Answer 5

我看到的主要区别是选项1将click事件绑定到页面上的每个按钮（可能最终会有许多空事件）和第二个事件只会将事件附加到目标按钮。

虽然我对javascript性能并不敏感，但我还是说第二种选择更具可读性，并且可以减少维护问题。

如果不同的按钮执行几乎相同的功能，虽然参数略有不同，那么可能一个很好的选择是在按钮元素上使用data-属性并让执行相同任务的所有按钮使用相同的单击事件，它将从单击的实际html元素中提取唯一参数。过于简单的例子：

HTML：

<button data-effect="slide" ...>slide</button>
<button data-effect="fade" ...>slide</button>

的javascript：

$("button[data-effect]".click(function(){
    //do stuff
    var $this = $(this);
    $this.hide($this.attr("data-effect") || "blind")
});

是否有更多JQuery方法来组合处理程序而不是switch语句？

5 个答案: