Explication détaillée des exemples d'utilisation de la fonction jQuery.one()

La fonction

one() est utilisée pour lier une fonction de gestion d'événements unique à un ou plusieurs événements de chaque élément correspondant.

De plus, vous pouvez également transmettre certaines données supplémentaires requises à la fonction de gestionnaire d'événements.

Les fonctions de traitement d'événements liées à la fonction one() sont toutes uniques et la fonction de traitement d'événements ne sera exécutée que lorsque l'événement est déclenché pour la première fois. Après le déclenchement, jQuery supprimera la liaison d'événement actuelle.

De plus, vous pouvez lier plusieurs gestionnaires d'événements ponctuels au même élément et au même type d'événement. Lorsqu'un événement est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via one(), utilisez la fonction unbind() ou off().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est ajoutée dans jQuery 1.1. La fonction one() a principalement les deux formes d'utilisation suivantes :

Utilisation 1 :

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

pour chaque correspondance Gestionnaire d'événements de liaison d'événement spécifié de l'élément.

Utilisation 2 : jQuery 1.7 prend désormais en charge cette utilisation.

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

Lier les événements sur chaque élément correspondant à l'événement spécifié pour tous les éléments descendants qui correspondent à la fonction de traitement du sélecteur (sélecteur) spécifié .

Utilisation 3 : jQuery 1.7 prend désormais en charge cette utilisation.

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

Variations des deux utilisations précédentes. eventsMap est un objet, chacun de ses attributs correspond aux événements du paramètre et la valeur de l'attribut correspond au gestionnaire de paramètres.

Paramètres

Description des paramètres

events Type de chaîne Un ou plusieurs types d'événements séparés par des espaces et un espace de noms facultatif, tels que "click", "focus cliquez", "keydown.myPlugin".

data Facultatif/Tout type de données qui doivent être transmis à la fonction de traitement d'événements via event.data lorsqu'un événement est déclenché.

Fonction de traitement d'événement spécifiée par le type de fonction du gestionnaire.

selector String type est un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés.

Le type d'objet eventsMap est un objet Objet, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement lié (paramètre gestionnaire) .

À partir de jQuery 1.7, l'utilisation de la fonction one() est exactement la même que celle de la fonction on(), sauf que la fonction one() est liée à des fonctions de traitement d'événements ponctuels.

Pour l'espace de noms facultatif dans les événements de paramètre (uniquement pris en charge dans la version 1.4.3+), veuillez vous référer à l'exemple de code ci-dessous.

Concernant le sélecteur de paramètre, vous pouvez simplement le comprendre comme : si le paramètre est égal à null ou omis, l'événement est lié à l'élément correspondant actuel ; sinon, c'est l'élément descendant de l'élément correspondant actuel ; qui correspond à l'événement de liaison du sélecteur.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM qui déclenche l'événement parmi les éléments descendants de l'élément correspondant actuel. Si le paramètre selector est nul ou omis, cela pointe vers l'élément correspondant actuel (c'est-à-dire l'élément).

on() transmettra également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

La valeur de retour du gestionnaire de paramètres a le même effet que la valeur de retour de la fonction de traitement d'événements native du DOM. Par exemple, la fonction de gestionnaire d'événements de l'événement « submit » (soumission de formulaire) renvoie false, ce qui peut empêcher la soumission du formulaire.

Si le gestionnaire de la fonction de traitement d'événements renvoie uniquement une valeur fausse, vous pouvez directement définir le gestionnaire sur false.

Si l'élément actuel a plusieurs éléments descendants qui correspondent au sélecteur, tant que l'un des éléments descendants déclenche l'exécution de la fonction de traitement d'événement, la liaison d'événement sur l'élément actuel sera supprimée. ne peut pas déclencher à nouveau l'exécution.

Valeur de retour

one()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

Veuillez vous référer au code HTML initial suivant :

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

Nous lions un événement de clic unique au bouton dans le code HTML ci-dessus :

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

De plus, nous pouvons également lier plusieurs événements en même temps et transmettre des données supplémentaires à la fonction de traitement des événements. Nous pouvons le faire via le paramètre event (objet événement événement) transmis par jQuery pour. la fonction de traitement d'événement. Traitement :

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

De plus, si l'élément qui remplit les conditions est nouvellement ajouté après l'exécution de la fonction one(), l'événement de liaison prendra toujours effet sur lui. En prenant le code HTML initial comme exemple, nous pouvons écrire le code jQuery suivant :

Remarque : Bien que le code jQuery suivant lie les événements de clic à tous les éléments p descendants de l'élément n1, le gestionnaire d'événements lui-même est lié à On l'élément n1, l'événement click de l'élément p descendant est délégué à l'élément n1 pour traitement. Tant que l'un des n2, n3 et n9 déclenche l'événement click, le gestionnaire d'événements lié à l'élément body sera supprimé. En d’autres termes, n2, n3 et n9 ne peuvent exécuter la fonction de traitement d’événements qu’une seule fois au 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;);

Veuillez vous référer à nouveau au code jQuery suivant. Il existe deux éléments div, donc chaque élément div a un gestionnaire d'événements lié à l'événement click de l'élément p descendant.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!