jqueryのon()バインディングイベントとoff()アンバインドイベント

巴扎黑
リリース: 2018-05-15 16:42:37
オリジナル
3652 人が閲覧しました

off()関数は、要素削除するために使用されます。 ="_blank">イベント処理関数。

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

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

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

语法

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

用法一

jQueryObject.off( [ events [, selector ] [, handler ] ] )
ログイン後にコピー

用法二

jQueryObject.off( eventsMap [, selector ] )
ログイン後にコピー

参数

使用方法 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和元素)的click事件绑定的所有处理函数 45 // 点击按钮或链接,都不会触发执行任何事件处理函数 46 // $("body").off("click"); 47 48 49 // 移除body元素为所有元素的任何事件绑定的所有处理函数 50 // 点击按钮,或点击链接或者鼠标移入/移出链接,都不会触发执行任何事件处理函数51 // $("body").off( );
ログイン後にコピー
ログイン後にコピー

パラメータ

jQuery 1.7 この機能を追加しました。主に次の 2 つの使用形式があります: :
参数 描述
events 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。
selector 可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为nulloff()この関数は主に、on() 関数によってバインドされているイベント処理関数のブロックを解除するために使用されます。

この関数はjQueryオブジェクト (インスタンス) に属します。

構文

使用方法 1:

1  2  3 CodePlayer
ログイン後にコピー
ログイン後にコピー
パラメータ 説明 eventsオプション/文字列型 1 つ以上の Aスペースで区切られたイベント タイプとオプションの名前空間(「click」、「focus click」など) 、「keydown.myPlugin」。
eventsMapオブジェクト タイプは
オブジェクト オブジェクトであり、それぞれの属性 イベント タイプとオプションの名前空間 (パラメータ events) に対応して、属性値はバインドされたイベント処理関数 (パラメータ handler) に対応します。 selectorOptional/String 型 どの子孫要素がバインドされたイベントをトリガーできるかを指定するために使用される jQuery セレクター。このパラメータが nullであるか省略されている場合、現在の要素自体がイベントにバインドされていることを意味します (イベント ストリームが現在の要素に到達できる限り、実際のトリガーは子孫要素である場合もあります)。 。関数タイプで指定されたhandlerオプション/イベント処理function。

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

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

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

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

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

返回值

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

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

off()方法的代码示例:

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

html代码

1  2  3 CodePlayer
ログイン後にコピー
ログイン後にコピー

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和元素)的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对象(实例)。

语法

jQuery1.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セレクターに一致する要素にバインドされます。パラメータhandlerthisは、現在一致する要素の子孫要素のうち、イベントをトリガーする DOM 要素を指します。パラメータselectornullに等しいか省略された場合、thisは現在一致する要素 (つまり、この要素) を指します。

on()は、handlerのパラメータ、つまり現在のイベントを表す Event オブジェクトも渡します。

パラメータ handlerの戻り値は、DOMネイティブイベント処理関数の戻り値と同じ効果があります。たとえば、「submit」(フォーム送信)イベントのイベント ハンドラー関数は falseを返し、フォームが送信されなくなる可能性があります。 イベント処理関数 handlerfalse値のみを返す場合は、 handlerfalseに直接設定できます。

戻り値

on()関数の戻り値は jQuery 型で、現在の jQuery オブジェクト自体を返します。重要な注意:on()関数は、現在の jQuery オブジェクトに一致する要素にイベント ハンドラーをバインドしませんが、イベント ハンドラーを要素にバインドします。セレクタのselectorパラメータに一致する子孫。on()関数は、イベントをこれらの子孫要素に 1 つずつ直接バインドするのではなく、現在の jQuery オブジェクトの一致する要素に処理を委任します。 DOM レベル 2 のイベント フロー メカニズムにより、子孫要素selectorがイベントをトリガーすると、イベント フローが現在の一致する要素に渡されるときに、そのイベントはイベント バブリング内のすべての祖先要素に渡されます。要素がセレクターselectorと一致する場合、jQuery はイベントをキャプチャし、バインドされたイベント処理 関数 を実行します。

以上がjqueryのon()バインディングイベントとoff()アンバインドイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!