on() The function is used to bind one or more events for the specified element Event processing function .
In addition, you can also pass some additional required data to the event handling function.
Starting from jQuery 1.7, the on() function provides all the functions required to bind event handlers and is used to uniformly replace the previous bind(), delegate(), live( ) and other event functions.
Even if it is a newly added element after executing the on() function, as long as it meets the conditions, the bound event handling function will be valid for it.
In addition, this function can bind multiple event processing functions to the same element and the same event type. When an event is triggered, jQuery will execute the bound event processing functions in the order of binding.
To delete an event bound via on(), use the off() function. If you want to attach an event, execute it only once, and then delete itself, use the one() function.
This function belongs to the jQuery object (instance).
Syntax
jQuery 1.7 Add this function. It mainly has the following two forms of usage:
Usage one:
1 jQueryObject.on( events [, selector ] [, data ], handler )
Copy after login
Usage two:
1 jQueryObject.on( eventsMap [, selector ] [, data ] )
Copy after login
Parameters
##Parameters | Description |
| events
|
String type One or more event types separated by spaces and an optional namespace, such as "click" , "focus click", "keydown.myPlugin".
|
| eventsMap
|
Object type An Object object, each of its properties corresponds to the event type And the optional namespace (parameter events), the attribute value corresponds to the bound event processing function (parameter handler).
|
| selector
|
Optional/String type A jQuery selector used to specify which descendant elements can trigger binding determined event. If this parameter is null or is omitted, it means that the current element itself is bound to the event (the actual triggerer may also be a descendant element, as long as the event stream can reach the current element).
|
| data
|
When an optional/any type of event is triggered, it needs to be passed to the event processing function through event.data any data.
|
| handler
|
Event handling function specified by Function type.
|
关于参数events中可选的命名空间，请参考最下面的示例代码。
关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。
参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。
on()还会为handler传入一个参数：表示当前事件的Event对象。
参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。
如果事件处理函数handler仅仅只为返回false值，可以直接将handler设为false。
返回值
on()函数的返回值为jQuery类型，返回当前jQuery对象本身。
重要说明：
如果传递了selector参数，那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。
示例&说明
以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：
1 // 这里的选择器selector用于指定可以触发事件的元素 2 // 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。 3 4 // jQuery 1.0+ (1.4.3+支持参数data) 5 $("selector").click( [ data ,] handler ); 6 7 // jQuery 1.0+ (1.4.3+支持参数data) 8 $("selector").bind( "click" [, data ], handler ); 9 10 // jQuery 1.3+ (1.4+支持参数data)11 $("selector").live( "click" [, data ], handler );12 13 // jQuery 1.4.2+14 $("ancestor").delegate( "selector", "click" [, data ], handler );15 16 // jQuery 1.7+17 $("ancestor").on( "click", "selector" [, data ], handler );Copy after login
请参考下面这段初始HTML代码：
1 <p id="n1">2 <p id="n2"><span>CodePlayer</span></p>3 <p id="n3"><span>专注于编程开发技术分享</span></p>4 <em id="n4">http://www.365mini.com</em>5 </p>6 <p id="n5">Google</p>
Copy after login
我们为
中的所有
元素绑定点击事件：
1 // 为p中的所有p元素绑定click事件处理程序2 // 只有n2、n3可以触发该事件3 $("p").on("click", "p", function(){4 // 这里的this指向触发点击事件的p元素(Element)5 alert( $(this).text() );6 });Copy after login
如果要绑定所有的
元素，你可以编写如下jQuery代码：
1 //为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)2 //n2、n3、n5均可触发该事件3 $("p").on("click", function(event){4 // 这里的this指向触发点击事件的p元素(Element)5 alert( $(this).text() );6 });Copy after login
此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理：
1 var data = { id: 5, name: "张三" };
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
// 附加数据可以是任意类型
$("body").on("mouseenter mouseleave", "#n5", data, function(event){
var $me = $(this); 7 var options = event.data; // 这就是传入的附加数据 8 if( event.type == "mouseenter"){ 9 $me.html( "你好，" + options.name + "!");
}else if(event.type == "mouseleave" ){
$me.html( "再见!");
}
});Copy after login
此外，即使符合条件的元素是on()函数执行后新添加，绑定事件对其依然有效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：
1 // 为p中的所有p元素绑定click事件处理程序2 // 只有n2、n3可以触发该事件3 $("p").on("click", "p", function(event){4 alert( $(this).text() );5 });6 7 // 后添加的n6也可以触发上述click事件，因为它也是p中的p元素8 $("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');Copy after login
参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。
1 function clickHandler(event){ 2 alert( "触发时的命名空间:[" + event.namespace + "]"); 3 } 4 5 var $p = $("p"); 6 7 // A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下 8 $p.on( "click.foo.bar", clickHandler ); 9 10 // B：为所有p元素绑定click事件，定义在test命名空间下11 $p.on( "click.test", clickHandler );12 13 var $n2 = $("#n2");14 15 // 触发所有click事件16 $n2.trigger("click"); // 触发A和B (event.namespace = "")17 18 // 触发定义在foo命名空间下的click事件19 $n2.trigger("click.foo"); // 触发A (event.namespace = "foo")20 // 触发定义在bar命名空间下的click事件21 $n2.trigger("click.bar"); // 触发A (event.namespace = "bar")22 // 触发同时定义在foo和bar两个命名空间下的click事件23 $n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")24 25 // 触发定义在test命名空间下的click事件26 $n2.trigger("click.test"); // 触发B (event.namespace = "test")27 28 // 移除所有p元素定义在foo命名空间下的click事件处理函数29 $p.off( "click.foo" ); // 移除A30 31 on()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：32 33 var data = { id: 5, name: "张三" };34 35 var events = {36 "mouseenter": function(event){37 $(this).html( "你好，" + event.data.name + "!");
38 },39 40 "mouseleave": function(event){41 $(this).html( "再见!");42 }
43 };44 45 //为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data46 $("body").on(events, "#n5", data);Copy after login
The above is the detailed content of jQuery on() selector function. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
