Question

事件分配样式之间有什么区别？例如：

$("button","#container").click(function(){
    console.log("Usage 1");
});

$("#container").click("button",function(){
    console.log("Usage 2");
});

$("#container button").click(function(){
    console.log("Usage 3");
});

$(document).click("#container button",function(){
    console.log("Usage 4");
});

http://jsfiddle.net/mesuutt/8Dkcc/2/

Answer 1

$("button","#container").click(function(){
    console.log("Usage 1");
});

这会查找button内的#container元素，并在找到的每个click元素上附加button个事件处理程序。

$("#container").click("button",function(){
    console.log("Usage 2");
});

这将在click上附加#container事件处理程序并传递＆＃34;按钮＆＃34;字符串作为事件数据到click事件处理程序。

$("#container button").click(function(){
    console.log("Usage 3");
});

这与您的第一个代码段相同。

$(document).click("#container button",function(){
    console.log("Usage 4");
});

这将在整个click附加document事件处理程序并传递＆＃34; #container按钮＆＃34;字符串作为事件数据到click事件处理程序。

Answer 2

jQuery文档没有指定语句2和4，所以我们可以忘记它们。对于语句1和3，它们将单击处理程序绑定到各个按钮 - 它们都实现相同的功能。

我的建议是利用事件委托：

$( container ).on( 'click', 'button', function () { ... });

其中container是对#container元素的引用。（您希望在页面加载时获取对静态元素的引用，这样您就不必在每次需要时都查询它们。）

jquery $（“按钮”，“＃container”）和$（“＃container按钮”）和类似用法之间有什么区别？

2 个答案: