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

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 + '，你碰到了隐藏关卡，获得' + obj.hidden + "金币!" );     
    }else{
        $me.html( '你已通过该关卡!' );     
    }
        
});

さらに、条件を満たす要素があれば、 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 サイトの他の関連記事を参照してください。