jQuery: $().click(fn)与$().bind('click',fn)有何区别？

Question

jQuery: $().click(fn)与$().bind('click',fn)有何区别？

116

使用jQuery来挂载事件处理程序时，使用click方法和其他事件绑定方法有何区别？

$().click(fn)

与使用bind方法相比

$().bind('click',fn);

除了 bind 函数的可选数据参数之外。

- Alan Storm

看起来click也有可选的data参数。有人知道它的工作方式是否有任何区别吗？来源：http://api.jquery.com/click/ - Nick Udell

8个回答

98

+1 对于Matthew的答案，但我认为我应该提到您也可以使用bind一次绑定多个事件处理程序。

$('#myDiv').bind('mouseover focus', function() {
    $(this).addClass('focus')
});

这是一个更加简洁的等价语句：

var myFunc = function() {
    $(this).addClass('focus');
};
$('#myDiv')
    .mouseover(myFunc)
    .focus(myFunc)
;

- nickf

21

+1 绑定多个事件对我来说是新闻，可能非常有用。 - cletus

7

你可以使用第二种形式绑定自定义事件，这是它们之间的一个区别。否则，它们似乎是同义词。请参见：jQuery事件文档

- nickohrn

1

bind 方法中有一个 [data] 参数，它只会在绑定时出现一次。

您还可以将自定义事件指定为 bind 的第一个参数。

- aaron

1

我认为 .click() 更加符合逻辑，但我想这取决于你的思维方式。

$('#my_button').click(function() { alert('BOOM!'); });

看起来似乎是最简单的。

- JedH

0

如果你使用Google Chrome，他们的开发者工具有一个事件监听器工具，选择你想要监视其事件的元素。

你会发现尝试两种方式都会得到相同的结果，因此它们是等效的。

- Omar Abid

0

我更喜欢使用.bind()，因为它与.live()的接口一致性更好。这不仅使代码更易读，而且使更改代码行以使用其中一种方法变得更加容易。

- danorton

0

你提到的这三个代码片段在事件处理和事件委托方面有一些差异。让我们来分析每一个：

$(".myBtn").click(function(){});: 这段代码将点击事件处理程序直接绑定到所有具有"class"属性为"myBtn"的元素上，并在执行时已存在。它直接附加事件处理程序到这些元素上。如果此代码运行后动态添加了具有相同类的新元素，则它们不会有点击事件处理程序附加到它们身上。
$(".myBtn").on("click", function(){});: 这段代码也将点击事件处理程序绑定到所有具有"class"属性为"myBtn"的元素上，但是它使用on()方法来附加事件处理程序。on()方法是一种更灵活的方式来绑定事件处理程序，它允许您处理多个事件并执行事件委托。与第一个代码片段类似，如果此代码运行后动态添加了新元素，则它们不会有点击事件处理程序附加到它们身上。
$(document).on("click", ".myBtn", function(){});: 这段代码使用事件委托将点击事件处理程序绑定到文档对象，并指定只有当事件目标与选择器".myBtn"匹配时才执行处理程序。这意味着点击事件委派给文档，并且任何匹配".myBtn"选择器的元素上发生的点击事件，无论它们在绑定时是否存在或后来动态添加，都将触发事件处理程序。
$(".myBtn").bind("click",function(){});: bind()方法是jQuery中旧版本的事件绑定方法，类似于on()方法，但在jQuery 3.0版本之后已被弃用。它可以为元素绑定多个事件处理程序，但缺少on()方法提供的某些功能和灵活性。

这三种方法之间的关键区别在于事件委托。第三种方法在处理动态添加的元素或者希望将事件处理程序附加到共同祖先元素（如 document）并处理从后代元素冒泡上来的事件时非常有用。

总结：

方法 1 直接将事件处理程序绑定到现有元素。
方法 2 也将事件处理程序绑定到现有元素，但提供更灵活的多事件处理方式。
方法 3 使用事件委托来处理现有和动态添加的元素上的事件，通过委托事件给共同祖先元素进行处理。
方法 4 是 jQuery 中旧版本的事件绑定方式（在 jQuery 3.0 中已不推荐使用）。类似于 on() 方法，但缺少一些功能和灵活性。

- qɐʇǝɥɐW

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Maravillas · Accepted Answer

顺便提一下，来自 jQuery源代码：

jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
    "mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave," +
    "change,select,submit,keydown,keypress,keyup,error").split(","), function(i, name){

    // Handle event binding
    jQuery.fn[name] = function(fn){
        return fn ? this.bind(name, fn) : this.trigger(name);
    };
});

所以，没有区别。

$().click(fn)

调用

$().bind('click',fn)