javascript - 使用 jQuery 绑定(bind)事件的正确方法

Question

我对 Javascript 有点陌生，但对 jQuery 更陌生。我已经遇到过一些让我摸不着头脑的事情。

有什么区别:

$('.foo').click(function(){
//blah
});

和

$('.foo').onclick = function(){
//blah
}

我更喜欢第二种方式，但它似乎不起作用。我做错了什么吗？

提前致谢。

Answer 1

你没有理解 jQuery 的全部要点。您的首选方法不适用于 jQuery，因为 jQuery 不能对单个 DOM 元素进行操作。单个 DOM 元素具有 onclick 属性，因此如果您执行类似的操作，它将起作用:

document.getElementById('bar').onclick = function() { // blah };

然而，jQuery 的本质是集。例如，在您粘贴的代码中，您尝试将某些内容绑定(bind)到具有 foo 类的所有元素。当做这样的事情时，你必须遵守 jQuery 的规则(这是一件好事!)。包装集，即 $('.foo') 与我上面所做的直接获取 DOM 元素不同。然而，它将包含一个由 jQuery 公开的所有找到的 DOM 元素组成的数组。因此，如果文档中存在一个具有 foo 类的元素，您可以执行以下操作:

$('.foo')[0].onclick = function() { // blah };

但是，不建议这样做，因为 jQuery 的全部意义就是抽象出所有这些特定的 Javascript 语法，并让 jQuery 为您解决问题。您应该接受这一点，因为它将使您的代码更加简洁和可移植。因此，您应该使用 click 或 bind 函数:

$('.foo').click(function() {
    // will bind something to all elements with a class of foo
});

$('.foo').bind('click', function() {
    // functionally identical to the above, either is fine
});