ホームページ ウェブフロントエンド jsチュートリアル jQuery.one()関数の使用例を詳しく解説

jQuery.one()関数の使用例を詳しく解説

Jul 08, 2017 am 11:28 AM
詳しい説明

one() 関数は、一致する要素ごとに 1 回限りの イベント処理 関数を 1 つ以上のイベントにバインドするために使用されます。

さらに、追加の必要なデータをイベント ハンドラー関数に渡すこともできます。

one() 関数を通じてバインドされたイベント処理関数はすべて 1 回限りであり、イベント処理関数はイベントが初めてトリガーされたときにのみ実行されます。トリガー後、jQuery は現在のイベント バインディングを削除します。

さらに、複数のワンタイム イベント ハンドラーを同じ要素および同じイベント タイプにバインドできます。イベントがトリガーされると、jQuery はバインドされたイベント処理関数をバインドの順序で実行します。

one() 経由でバインドされたイベントを削除するには、unbind() または off() 関数を使用します。

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

構文

この関数はjQuery 1.1で追加されました。 one() 関数は主に次の 2 つの形式で使用されます:

使用法 1:

jQueryObject.one(events [, data], handler)

一致する各要素の指定されたイベントにイベント処理関数をバインドします。

使用法 2: jQuery 1.7 では、この使用法が新たにサポートされました。

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

指定されたセレクター (セレクター) に一致するすべての子孫要素について、一致した各要素のイベント ハンドラー関数を指定されたイベントにバインドします。

使用法 3: jQuery 1.7 はこの使用法を新たにサポートします。

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

前の 2 つの使用法のバリエーション。 eventsMap はオブジェクトであり、その各属性はパラメータ イベントに対応し、属性値はパラメータ ハンドラに対応します。

パラメータ

パラメータの説明

events 文字列型 スペースで区切られた 1 つ以上のイベント タイプと、オプションの namespace (「click」、「focus click」、「keydown.myPlugin」など)。

data オプション/イベントのトリガー時に、event.data を通じてイベント処理関数に渡す必要がある任意のタイプのデータ。

ハンドラー関数型で指定されたイベント処理関数。

selector String 型は、どの子孫要素がバインドされたイベントをトリガーできるかを指定するために使用される jQuery セレクターです。

eventsMap オブジェクト タイプは Object オブジェクト で、その各属性はイベント タイプとオプションの名前空間 (パラメーター イベント) に対応し、属性値はバインドされたイベント処理関数 (パラメーター ハンドラー) に対応します。

jQuery 1.7 以降、one() 関数の使用法は、one() 関数がワンタイム イベント処理関数にバインドされていることを除いて、on() 関数とまったく同じです。

パラメータイベントのオプションの名前空間(1.4.3以降でのみサポート)については、以下のサンプルコードを参照してください。

パラメーター セレクターに関しては、単純に次のように理解できます: パラメーターが null に等しいか省略された場合、イベントは現在一致する要素にバインドされ、それ以外の場合、イベントは子孫の中のセレクターに一致する要素にバインドされます。現在一致する要素の要素。

パラメーター ハンドラー内の this は、現在一致する要素の子孫要素のうち、イベントをトリガーする DOM 要素を指します。セレクター パラメーターが null であるか省略されている場合、これは現在一致する要素 (つまり、要素) を指します。

on() は、現在のイベントを表す Event オブジェクトというパラメーターもハンドラーに渡します。

パラメータハンドラーの戻り値は、DOMネイティブイベント処理関数の戻り値と同じ効果があります。たとえば、「submit」(フォーム送信) イベントのイベント ハンドラーは false を返し、フォームが送信されないようにします。

イベント処理関数ハンドラーが false 値のみを返す場合は、ハンドラーを直接 false に設定できます。

現在の要素にセレクターに一致する複数の子孫要素がある場合、いずれかの子孫要素がイベント処理関数の実行をトリガーする限り、現在の要素のイベント バインディングは削除され、現在の要素内の一致する他の子孫要素は削除されます。条件は、実行を再度トリガーすることはできません。

戻り値

one()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

例と説明

次の初期 HTML コードを参照してください:

<input id="btn" type="button" value="点击" />
<div id="n1">
    <p id="n2">段落文本内容1</p>
    <p id="n3">段落文本内容2</p>
    <span id="n4">隐藏关卡</span>
</div>
<div id="n5">
    <p id="n6">段落文本内容3</p>
    <p id="n7">段落文本内容4</p>
</div>
<p id="n8">专注于编程开发技术分享</p>
ログイン後にコピー

上記の HTML のボタンに 1 回限りのクリック イベントをバインドします:

// 只有第一次点击时,执行该事件处理函数
// 执行后one()会立即移除绑定的事件处理函数
$("#btn").one("click", function(){
    alert("只弹出一次提示框!");     
});
ログイン後にコピー

さらに、複数のイベントを同時にバインドすることもできます追加のデータをイベント処理関数に渡すには、イベント処理関数の jQuery によって渡されるパラメーターevent (イベント イベント オブジェクト) を通じて処理できます:

$("#n4").one("mouseenter mouseleave", obj, function(event){
    var obj = event.data;
    var $me = $(this);
    if(event.type == "mouseenter"){
        $me.html( obj.name + &#39;,你碰到了隐藏关卡,获得&#39; + obj.hidden + "金币!" );     
    }else{
        $me.html( &#39;你已通过该关卡!&#39; );     
    }
        
});
ログイン後にコピー

さらに、条件を満たす要素があれば、 one() 関数が実行された後です。新しく追加されたものについては、バインディング イベントが引き続き有効になります。最初の HTML コードを例として、次の jQuery コードを作成できます。

注: 次の jQuery コードは、クリック イベントを n1 要素のすべての子孫 p 要素にバインドしますが、イベント ハンドラー自体は n1 要素にバインドされます。の場合、子孫 p 要素のクリック イベントは、処理のために n1 要素に委任されます。 n2、n3、n9 のいずれかが click イベントをトリガーする限り、body 要素にバインドされているイベント ハンドラーは削除されます。つまり、n2、n3、n9 はイベント処理関数を合計 1 回しか実行できません。

// 在n1元素上为所有后代p元素的click事件绑定事件处理函数
// 只有n2、n3可以触发该事件
$("#n1").one("click", "p", function(event){
    alert( $(this).text() );
});
//新添加的n9也可以触发上述click事件,因为它也是n1的后代p元素
$("#n1").append(&#39;<p id="n9">上述绑定的一次性click事件也会对该元素也生效!</p>&#39;);
ログイン後にコピー

次の jQuery コードをもう一度参照してください。 div 要素が 2 つあるため、各 div 要素には、子孫の p 要素のクリック イベントにバインドされたイベント ハンドラーがあります。

// 在每个div元素上为其后代p元素的click事件绑定事件处理函数
// 只有n2、n3、n6、n7可以触发该事件
// n2和n3两者总共只能触发一次,n6和n7两者总共只能触发一次
$("div").one("click", "p", function(event){
    alert( $(this).text() );
});
ログイン後にコピー

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间,可以在触发事件、移除事件时限定触发或移除的范围。

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A:为所有p元素绑定click事件,定义在foo和bar两个命名空间下
$p.one( "click.foo.bar", clickHandler );
// B:为所有p元素绑定click事件,定义在test命名空间下
$p.one( "click.test", clickHandler );
var $n2 = $("#n2");
/* 由于one()函数绑定的事件处理函数是一次性的,因此下面的每行代码只能分别执行,无法同时执行 */
// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")
// 触发定义在foo命名空间下的click事件
// $n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
// $n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
// $n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")
// 触发定义在test命名空间下的click事件
// $n2.trigger("click.test"); // 触发B (event.namespace = "test")
one()函数的参数eventsMap是一个对象,可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下:
var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};
//为n5绑定mouseenter mouseleave两个事件
$("#n5").one( eventsMap );
ログイン後にコピー

以上がjQuery.one()関数の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Win11での管理者権限の取得について詳しく解説 Win11での管理者権限の取得について詳しく解説 Mar 08, 2024 pm 03:06 PM

Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています

Oracle SQLの除算演算の詳細説明 Oracle SQLの除算演算の詳細説明 Mar 10, 2024 am 09:51 AM

OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算

PHPモジュロ演算子の役割と使い方を詳しく解説 PHPモジュロ演算子の役割と使い方を詳しく解説 Mar 19, 2024 pm 04:33 PM

PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。

Linuxシステムコールsystem()関数の詳細説明 Linuxシステムコールsystem()関数の詳細説明 Feb 22, 2024 pm 08:21 PM

Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。

C言語学習ルートを詳細に分析 C言語学習ルートを詳細に分析 Feb 18, 2024 am 10:38 AM

ソフトウェア開発の分野で広く使用されているプログラミング言語として、C 言語は多くの初心者プログラマーにとって最初の選択肢です。 C言語を学ぶと、プログラミングの基礎知識を定着させるだけでなく、問題解決能力や思考力も向上します。この記事では、初心者が学習プロセスをより適切に計画できるようにするための C 言語学習ロードマップを詳しく紹介します。 1. 基本的な文法を学ぶ C 言語の学習を始める前に、まず C 言語の基本的な文法規則を理解する必要があります。これには、変数とデータ型、演算子、制御ステートメント (if ステートメント、

Linuxのcurlコマンドの詳しい説明 Linuxのcurlコマンドの詳しい説明 Feb 21, 2024 pm 10:33 PM

Linuxのcurlコマンドの詳細な説明 要約:curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンド ライン ツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。

Promise.resolve() について詳しく見る Promise.resolve() について詳しく見る Feb 18, 2024 pm 07:13 PM

Promise.resolve() の詳細な説明には、特定のコード例が必要です。Promise は、非同期操作を処理するための JavaScript のメカニズムです。実際の開発では、順番に実行する必要があるいくつかの非同期タスクを処理する必要があることがよくあり、満たされた Promise オブジェクトを返すために Promise.resolve() メソッドが使用されます。 Promise.resolve() は Promise クラスの静的メソッドであり、

numpyのバージョンクエリメソッドの詳細説明 numpyのバージョンクエリメソッドの詳細説明 Jan 19, 2024 am 08:20 AM

Numpy は、豊富な配列演算関数とツールを提供する Python 科学計算ライブラリです。 Numpy のバージョンをアップグレードする場合、互換性を確保するために現在のバージョンをクエリする必要がありますが、この記事では Numpy のバージョン クエリの方法と具体的なコード例を詳しく紹介します。方法 1: Python コードを使用して Numpy のバージョンをクエリします。Python コードを使用して簡単に Numpy のバージョンをクエリできます。実装方法とサンプル コードは次のとおりです: importnumpyasnpprint(np

See all articles