A brief discussion on jquery's on() binding event and off() unbinding event

The

off() function is used to remove the event handler of one or more events bound to an element. The

off() function is mainly used to unblock the event processing function bound by the on() function.

This function belongs to the jQuery object (instance).

Syntax

This function is added in jQuery 1.7. It mainly has the following two forms of usage:

Usage 1:

jQueryObject.off( [ events [, selector ] [, handler ] ] )

Usage 2:

jQueryObject.off( eventsMap [, selector ] ) The

parameters

off() function will remove the event handler of the events event bound to the descendant element selector on the current matching element.

If the selector parameter is omitted, the event handler bound to any element is removed.

The parameter selector must be consistent with the selector passed in when adding binding through the on() function.

If the parameter handler is omitted, all event handlers bound to the specified event type of the specified element will be removed.

If all parameters are omitted, it means to remove any event handlers of any event type bound to any element on the current element.

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

In fact, the parameters of the off() function are all filtering conditions, and only event processing functions that match all parameter conditions will be removed. The more parameters there are, the more qualifications there are and the smaller the range that is removed.

off() method code example:

Easily overlooked point: the unbinding event of the element off, where the selector must be consistent with the selector used when on binds the event.

html code

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>

jquery code executed when the page is loaded

function btnClick1(){
  alert( this.value + "-1" );
}
 
function btnClick2(){
  alert( this.value + "-2" );
}
 
var $body = $("body");
 
// 给按钮1绑定点击
$body.on("click", "#btn1", btnClick1 );
 
// 给按钮2绑定点击
$body.on("click", "#btn2", btnClick2 );
 
//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseover mouseleave", "a", function(event){
  if( event.type == "click" ){
    $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行
    alert("点击事件");
    alert("ddd");
  }else if( event.type == "mouseover" ){
    $(this).css("color", "red");
  }else{
    $(this).css("color", "blue");
     
  }
});
 
 
// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮，btnClick1照样执行
$body.off("click", ":button", btnClick2);
 
 
// 点击按钮1，不会执行任何事件处理函数
// $body.off("click", "#btn1");
 
 
// 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
 
 
// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
// 点击按钮或链接，都不会触发执行任何事件处理函数
// $("body").off("click");
 
 
// 移除body元素为所有元素的任何事件绑定的所有处理函数
// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数
// $("body").off( );

on() function is used to bind event handlers to one or more events of the specified element.

In addition, you can also pass some additional required data to the event handler 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 event functions such as bind(), delegate(), live(), etc.

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 effective for it.

In addition, this function can bind multiple event handlers 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 remove 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 jQuery object (instance).

Syntax

This function is added in jQuery 1.7. It mainly has the following two forms of usage:

Usage 1:

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

Usage 2:

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

parameter

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

Regarding the parameter selector, you can simply understand it as: if the parameter is equal to null or omitted, the event is bound to the current matching element; otherwise, the event is bound to the elements that match the selector among the descendant elements of the current matching element. .

This in the parameter handler points to the DOM element that triggers the event among the descendant elements of the current matching element. If the selector parameter is null or omitted, this points to the current matching element (that is, the element).

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

The return value of the parameter handler has the same effect as the return value of the DOM native event processing function. For example, the event handler of the "submit" (form submission) event returns false to prevent the form from being submitted.

If the event processing function handler only returns a false value, you can directly set the handler to false.

Return value

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

Important note: The

on() function does not bind event handlers to elements matching the current jQuery object, but binds event handlers to elements in their descendant elements that match the selector parameter of the selector. The on() function does not directly bind events to these descendant elements one by one, but delegates processing to the matching elements of the current jQuery object. Due to the DOM level 2 event flow mechanism, when the descendant element selector triggers an event, the event will be passed to all its ancestor elements in the event bubbling. When the event flow is passed to the current matching element, jQuery will determine which descendant element it is. When an event is triggered, if the element matches the selector, jQuery will capture the event and execute the bound event handler.