jquery's on() binding event and off() unbinding event

View Code

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外，你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于jQuery对象(实例)。

语法

jQuery1.7 新增该函数。其主要有以下两种形式的用法：

用法一：

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

用法二：

jQueryObject.on( eventsMap [, selector ] [, data ] )

参数

For the optional namespace in the parameterevents, please refer to the sample code below.

Regarding the parameterselector, you can simply understand it as: if the parameter is equal tonullor is omitted, the event is bound to thecurrent matching element; Otherwise, the event is bound to elements that match theselectorselector among the descendant elements of thecurrently matched element.

thisin the parameterhandlerpoints to the DOM element that triggers the event among the descendant elements of the current matching element. If the parameterselectoris equal tonullor is omitted,thispoints to the current matching element (that is, this element).

on()will also pass in a parameter forhandler: the Event object representing the current event.

The return value of parameterhandlerhas the same effect as the return value of the DOM native event processing function. For example, the event handler function of the "submit" (form submission) event returnsfalse, which can prevent the form from being submitted.

If the event handling functionhandleronly returns thefalsevalue, you can directly sethandlertofalse.

Return value

on()The return value of the function is ofjQuery type, returning the current jQuery object itself.

Important Note: The

on()function does notnotbind the element matched by the current jQuery object Instead of specifying an event handler function, bind the event handler function to the elements among theirdescendant elements that match the selectorselectorparameters.on()The function does not directly bind events to these descendant elements one by one, but delegates them to the matching elements of the current jQuery object for processing. Due to the DOM level 2 event flow mechanism, when the descendant elementselectortriggers an event, the event will be passed to all its ancestor elements in event bubbling. When the event flow is passed to the current matching element, jQuery It will determine which descendant element triggered the event. If the element matches the selectorselector, jQuery will capture the event and execute the bound event processingfunction.

The above is the detailed content of jquery's on() binding event and off() unbinding event. For more information, please follow other related articles on the PHP Chinese website!