Detailed explanation of jQuery.one() function usage examples

The

one() function is used to bind one-time event processing functions to one or more events for each matching element.

In addition, you can also pass some additional required data to the event handling function.

The event processing functions bound through the one() function are all one-time, and the event processing function will only be executed when the event is triggered for the first time. After triggering, jQuery will remove the current event binding.

In addition, you can bind multiple one-time 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 delete an event bound via one(), use the unbind() or off() function.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.1 Added this function. The one() function mainly has the following two forms of usage:

Usage one:

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

For each match The specified event binding event handler of the element.

Usage 2: jQuery 1.7 newly supports this usage.

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

Bind events on each matching element to the specified event for all descendant elements that match the specified selector (selector) processing function.

Usage 3: jQuery 1.7 newly supports this usage.

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

Variations of the previous two usages. eventsMap is an object, each of its attributes corresponds to the parameter events, and the attribute value corresponds to the parameter handler.

Parameters

Parameter Description

events String type One or more event types separated by spaces and optional namespace, such as "click ","focus click","keydown.myPlugin".

data Optional/Any type of data that needs to be passed to the event processing function through event.data when an event is triggered.

The event processing function specified by the handler Function type.

selector String type is a jQuery selector used to specify which descendant elements can trigger bound events.

eventsMap Object type is an Object object, each attribute corresponds to the event type and optional namespace (parameter events), and the attribute value corresponds to the bound event processing function (parameter handler) .

Starting from jQuery 1.7, the usage of the one() function is exactly the same as the on() function, except that the one() function is bound to one-time event processing functions.

For the optional namespace in the parameter events (only supported in 1.4.3+), 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, it is the descendant element of the current matching element that matches the selector selector. Element binding event.

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 for 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 function of the "submit" (form submission) event returns false, which can 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.

If the current element has multiple descendant elements that match the selector, as long as any of the descendant elements triggers the execution of the event processing function, the event binding on the current element will be removed. Other descendant elements cannot trigger execution again.

Return value

one()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

<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>

We bind a one-time click event to the button in the above HTML:

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

In addition, we can also bind multiple events at the same time and pass some additional data to the event processing function. We can process it through the parameter event (Event event object) passed in by jQuery for the event processing function:

$("#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( '你已通过该关卡!' );     
    }
        
});

In addition, if the qualifying element is newly added after the one() function is executed, the binding event will still take effect on it. Taking the initial HTML code as an example, we can write the following jQuery code:

Note: Although the following jQuery code binds click events to all descendant p elements of the n1 element, the event handler itself is bound On the n1 element, the click event of the descendant p element is delegated to the n1 element for processing. As long as any one of n2, n3, and n9 triggers the click event, the event handler bound to the body element will be removed. In other words, n2, n3, and n9 can only execute the event processing function once in total.

// 在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;);

Please refer to the following jQuery code again. There are two div elements, so each div element has an event handler bound to the click event of the descendant p element.

// 在每个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 );

The above is the detailed content of Detailed explanation of jQuery.one() function usage examples. For more information, please follow other related articles on the PHP Chinese website!