Question

jQuery文档中的on（）函数描述为

.on( events [, selector ] [, data ], handler )

请告诉我这个功能中有哪些（ [，）（] [，）（]，）？

Answer 1

这意味着它们是可选参数，即你可以这样做：

$('my-cool-element').on('click', function() {
    ...
}

或

$('my-cool-element').on('click', 'my-cool-sub-element', function() {
    ...
}

Answer 2

函数参数中的[]表示其中的参数是可选的。

on：

.on( events [, selector ] [, data ], handler )`

event：一个或多个以空格分隔的事件类型和可选的命名空间，例如＆＃34; click＆＃34;或＆＃34; keydown.myPlugin＆＃34;。

selector：一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

data：触发事件时要传递给event.data中处理程序的数据。

handler：触发event时执行的函数。值false也可以作为简单执行return false的函数的简写。

<强>变体

1忽略所有可选参数：

$("tr").on("click", function () {
    console.log($(this).text());
});

使用此功能，您可以bind事件到选择器中提供的所有元素。

2使用选择器：

$("#dataTable tbody").on("click", "tr", function () {
    console.log($(this).text());
});

这是event delegation。使用此功能，您可以bind向#dataTable tbody内的所有元素发送事件。此外，还有tbody内的动态添加元素。

参考：http://learn.jquery.com/events/event-delegation/

3使用数据参数

$("button").on("click", {
    name: "Karl"
}, function(e) {
    alert('Hello ' + e.data.name)
});

要将数据发送到事件处理程序，请使用此参数。这是一个可以使用event.data

在事件处理程序中访问的对象

4使用所有参数

$("div").on("click", "button", {
    name: "Karl"
}, function(e) {
    alert('Hello ' + e.data.name);
});

Answer 3

[] 内的参数是可选的，事件和处理程序是必需的：

events 是一个jquery事件，例如 .click（）， .hide（）等。{{3 }}
[selector] 是 html标记的jquery选择器，例如'div'，'img'< / strong>下， 'a.someClass'，'ul li'等，jquery events documentazione here

[data] 是在事件中传递给event.data中的处理程序的数据被触发了。例如：

$( "button" ).eq( i ).on( "click", { value: i }, function( event ) { // to do });

在这种情况下， {value：i} 是数据。 jquery selector documentation here

handler 是触发事件时执行的函数 jquery函数

示例：

$( "button" ).on( "click", "div", { value: i }, function( event ) { // to do });

在这种情况下，“click”是[event]，“div”是[selector]，{value：1}是[data]，function（event）id handler

注意：更简单地使用此 .on（事件[，选择器] [，数据]），它经常被使用。

示例：

$( "body" ).on( "click", "p", function() { $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" ); });

在这种情况下“click是[event]，”p“是[selector]，function（）...是handler。

jquery data documentation here

jQuery文档函数表示法

3 个答案: