jquery의 on() 바인딩 이벤트 및 off() 바인딩 해제 이벤트

off() 함수는 이벤트 처리기능.

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。

off()函数主要用于解除由on()函数绑定的事件处理函数。

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

语法

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

用法一：

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

用法二：

jQueryObject.off( eventsMap [, selector ] )

参数

jQuery 1.7 이 기능을 추가했습니다. 주로 다음과 같은 두 가지 사용법이 있습니다:

용법 2:

 1 function btnClick1(){ 
 2     alert( this.value + "-1" ); 
 3 } 
 4  
 5 function btnClick2(){ 
 6     alert( this.value + "-2" ); 
 7 } 
 8  
 9 var $body = $("body");
 10 
 11 // 给按钮1绑定点击
 12 $body.on("click", "#btn1", btnClick1 );
 13 
 14 // 给按钮2绑定点击15 $body.on("click", "#btn2", btnClick2 );
 16 
 17 //为所有a元素绑定click、mouseover、mouseleave事件
 18 $body.on("click mouseover mouseleave", "a", function(event){
 19     if( event.type == "click" ){
 20         $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行
 21         alert("点击事件");
 22         alert("ddd");
 23     }else if( event.type == "mouseover" ){
 24         $(this).css("color", "red");
 25     }else{
 26         $(this).css("color", "blue");
 27         
 28     }
 29 });
 30 
 31 
 32 // 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
 33 // 点击按钮，btnClick1照样执行
 34 $body.off("click", ":button", btnClick2);
 35 
 36 
 37 // 点击按钮1，不会执行任何事件处理函数
 38 // $body.off("click", "#btn1");
 39 
 40 
 41 // 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
 42 
 43 
 44 // 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
 45 // 点击按钮或链接，都不会触发执行任何事件处理函数
 46 // $("body").off("click");
 47 
 48 
 49 // 移除body元素为所有元素的任何事件绑定的所有处理函数
 50 // 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数51 // $("body").off( );

매개변수

参数	描述
events	可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为nulloff() 이 함수는 주로 on() 함수에 바인딩된 이벤트 처리 함수를 차단 해제하는 데 사용됩니다. 이 함수는 jQuery 개체(인스턴스)에 속합니다. 구문
사용법 1: 1 <input id="btn1" type="button" value="点击1" /> 2 <input id="btn2" type="button" value="点击2" /> 3 <a id="a1" href="#">CodePlayer</a>

매개변수	설명	eventsOptional/String 유형 하나 이상 A 공백으로 구분된 이벤트 유형 및 선택적인 네임스페이스(예: "click", "focus click") , "keydown.myPlugin".

eventsMap🎜🎜🎜Object 유형은 Object 객체이며, 각 객체는 속성 이벤트 유형 및 선택적 네임스페이스(events 매개변수)에 해당하는 속성 값은 바인딩된 이벤트 처리 함수(handler 매개변수)에 해당합니다. 🎜🎜🎜🎜🎜selector🎜🎜🎜Optional/String 유형 바인딩된 이벤트를 트리거할 수 있는 하위 요소를 지정하는 데 사용되는 jQuery 선택기입니다. 이 매개변수가 null이거나 생략된 경우 현재 요소 자체가 이벤트에 바인딩되어 있음을 의미합니다(이벤트 스트림이 현재 요소에 도달할 수 있는 한 실제 트리거는 하위 요소일 수도 있음). . 🎜🎜🎜🎜🎜handler🎜🎜🎜옵션/이벤트 처리 🎜🎜function🎜은 함수 유형으로 지정됩니다. 🎜🎜🎜🎜🎜🎜

off()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。

如果省略参数selector，则移除为任何元素绑定的事件处理函数。

参数selector必须与通过on()函数添加绑定时传入的选择器一致。

如果省略参数handler，则移除指定元素指定事件类型上绑定的所有事件处理函数。

如果省略了所有参数，则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。

返回值

off()函数的返回值为jQuery类型，返回当前jQuery对象本身。

实际上，off()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数才会被移除。参数越多，限定条件就越多，被移除的范围就越小。

off()方法的代码示例:

容易忽略的点：off所解除元素的绑定事件，其中选择器必须和on绑定事件时所用的选择器一致。

html代码

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

View Code

页面加载时执行的jquery代码

 1 function btnClick1(){ 
 2     alert( this.value + "-1" ); 
 3 } 
 4  
 5 function btnClick2(){ 
 6     alert( this.value + "-2" ); 
 7 } 
 8  
 9 var $body = $("body");
 10 
 11 // 给按钮1绑定点击
 12 $body.on("click", "#btn1", btnClick1 );
 13 
 14 // 给按钮2绑定点击15 $body.on("click", "#btn2", btnClick2 );
 16 
 17 //为所有a元素绑定click、mouseover、mouseleave事件
 18 $body.on("click mouseover mouseleave", "a", function(event){
 19     if( event.type == "click" ){
 20         $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行
 21         alert("点击事件");
 22         alert("ddd");
 23     }else if( event.type == "mouseover" ){
 24         $(this).css("color", "red");
 25     }else{
 26         $(this).css("color", "blue");
 27         
 28     }
 29 });
 30 
 31 
 32 // 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
 33 // 点击按钮，btnClick1照样执行
 34 $body.off("click", ":button", btnClick2);
 35 
 36 
 37 // 点击按钮1，不会执行任何事件处理函数
 38 // $body.off("click", "#btn1");
 39 
 40 
 41 // 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
 42 
 43 
 44 // 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
 45 // 点击按钮或链接，都不会触发执行任何事件处理函数
 46 // $("body").off("click");
 47 
 48 
 49 // 移除body元素为所有元素的任何事件绑定的所有处理函数
 50 // 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数51 // $("body").off( );

View Code

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

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

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

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

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

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

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

语法

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

用法一：

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

用法二：

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

参数

参数	描述
events	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	Function类型指定的事件处理函数。

events 매개변수의 선택적 네임스페이스는 아래 샘플 코드를 참조하세요. events中可选的命名空间，请参考最下面的示例代码。

关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。

on()还会为handler传入一个参数：表示当前事件的Event对象。

参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。

如果事件处理函数handler仅仅只为返回false值，可以直接将handler设为false。

返回值

on()函数的返回值为jQuery类型，返回当前jQuery对象本身。

重要说明：

on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector 매개변수 selector와 관련하여 간단히 이해하면 다음과 같습니다. 매개변수가 null과 같거나 생략되면 그렇지 않으면 현재 일치하는 요소의 하위 요소 중 selector 선택기와 일치하는 요소에 이벤트가 바인딩됩니다. handler 매개변수의 this는 현재 일치하는 요소의 하위 요소 중 이벤트를 트리거하는 DOM 요소를 가리킵니다. selector 매개변수가 null과 같거나 생략된 경우 this는 현재 일치하는 요소(즉, 이 요소)를 가리킵니다.

on()은 handler에 대한 매개변수(현재 이벤트를 나타내는 Event 개체)도 전달합니다.

🎜handler 매개변수의 반환값은 DOM 네이티브 이벤트 처리 함수의 반환값과 동일한 효과를 갖습니다. 예를 들어, "submit"(양식 제출) 이벤트의 이벤트 핸들러 기능은 양식이 제출되지 않도록 false를 반환합니다. 🎜🎜이벤트 처리 함수 handler가 false 값만 반환하는 경우 handler를 false로 직접 설정할 수 있습니다. 🎜

반환 값

🎜 on() 함수의 반환 값은 jQuery 유형으로, 현재 jQuery 개체 자체를 반환합니다. 🎜🎜🎜중요 사항: 🎜🎜on() 함수는 현재 jQuery 객체와 일치하는 요소에 이벤트 핸들러를 바인딩하지 않지만, 이벤트 핸들러를 다음 요소에 바인딩합니다. 선택기 selector 매개변수와 일치하는 하위 항목. on() 함수는 이벤트를 이러한 하위 요소에 하나씩 직접 바인딩하지 않지만 현재 jQuery 개체의 일치하는 요소에 처리를 위임합니다. DOM 레벨 2 이벤트 흐름 메커니즘으로 인해 하위 요소 selector가 이벤트를 트리거하면 이벤트 흐름이 현재 일치하는 요소에 전달될 때 이벤트가 이벤트 버블링의 모든 상위 요소에 전달됩니다. 요소에서 jQuery는 이벤트를 트리거한 하위 요소를 결정합니다. 요소가 선택기 selector와 일치하면 jQuery는 이벤트를 캡처하고 바인딩된 이벤트 처리 🎜🎜 함수 🎜를 실행합니다. 🎜🎜🎜🎜🎜

위 내용은 jquery의 on() 바인딩 이벤트 및 off() 바인딩 해제 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!