Detaillierte Erläuterung der Anwendungsbeispiele für die jQuery.one()-Funktion

Die Funktion

one() wird verwendet, um eine einmalige Ereignisbehandlungsfunktion an ein oder mehrere Ereignisse jedes übereinstimmenden Elements zu binden.

Darüber hinaus können Sie auch einige zusätzliche erforderliche Daten an die Event-Handler-Funktion übergeben.

Die durch die Funktion one() gebundenen Ereignisverarbeitungsfunktionen sind alle einmalig und die Ereignisverarbeitungsfunktion wird nur ausgeführt, wenn das Ereignis zum ersten Mal ausgelöst wird. Nach dem Auslösen entfernt jQuery die aktuelle Ereignisbindung.

Darüber hinaus können Sie mehrere einmalige Ereignishandler an dasselbe Element und denselben Ereignistyp binden. Wenn ein Ereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus.

Um ein über one() gebundenes Ereignis zu entfernen, verwenden Sie die Funktion unbind() oder off().

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion wurde in jQuery 1.1 hinzugefügt. Die one()-Funktion hat hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung eins:

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

für jede Übereinstimmung Der angegebene Ereignisbindungs-Ereignishandler des Elements.

Verwendung 2: jQuery 1.7 unterstützt diese Verwendung neu.

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

Binden Sie Ereignisse für jedes übereinstimmende Element an das angegebene Ereignis für alle untergeordneten Elemente, die mit der angegebenen Verarbeitungsfunktion des Selektors (Selektors) übereinstimmen .

Verwendung 3: jQuery 1.7 unterstützt diese Verwendung neu.

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

Variationen der beiden vorherigen Verwendungen. eventsMap ist ein Objekt, jedes seiner Attribute entspricht den Parameterereignissen und der Attributwert entspricht dem Parameterhandler.

Parameter

Parameterbeschreibung

events String type Ein oder mehrere Ereignistypen, getrennt durch Leerzeichen und optionalen Namespace, wie z. B. „click“, „focus“. Klicken Sie auf „keydown.myPlugin“.

data Optional/Jede Art von Daten, die über event.data an die Ereignisverarbeitungsfunktion übergeben werden müssen, wenn ein Ereignis ausgelöst wird.

Durch den Handler-Funktionstyp angegebene Ereignisverarbeitungsfunktion.

selector String type ist ein jQuery-Selektor, der verwendet wird, um anzugeben, welche untergeordneten Elemente gebundene Ereignisse auslösen können.

eventsMap-Objekttyp ist ein Objektobjekt, jedes seiner Attribute entspricht dem Ereignistyp und dem optionalen Namespace (Parameterereignisse) und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion (Parameter). Behandler).

Ab jQuery 1.7 ist die Verwendung der Funktion one() genau die gleiche wie die der Funktion on(), mit der Ausnahme, dass die Funktion one() an Funktionen zur Verarbeitung einmaliger Ereignisse gebunden ist.

Informationen zum optionalen Namespace in den Parameterereignissen (nur in 1.4.3+ unterstützt) finden Sie im folgenden Beispielcode.

Was den Parameterselektor betrifft, können Sie ihn einfach so verstehen: Wenn der Parameter gleich Null ist oder weggelassen wird, ist das Ereignis an das aktuelle übereinstimmende Element gebunden, andernfalls ist es das untergeordnete Element des aktuellen übereinstimmenden Elements das dem Selektor-Selektor-Bindungsereignis entspricht.

Dies im Parameterhandler zeigt auf das DOM-Element, das das Ereignis unter den Nachkommenelementen des aktuell übereinstimmenden Elements auslöst. Wenn der Selektorparameter null ist oder weggelassen wird, zeigt dies auf das aktuell übereinstimmende Element (d. h. das Element).

on() übergibt außerdem einen Parameter an den Handler: das Event-Objekt, das das aktuelle Ereignis darstellt.

Der Rückgabewert des Parameterhandlers hat die gleiche Wirkung wie der Rückgabewert der nativen DOM-Ereignisverarbeitungsfunktion. Beispielsweise gibt der Ereignishandler des Ereignisses „submit“ (Formularübermittlung) „false“ zurück, um zu verhindern, dass das Formular übermittelt wird.

Wenn der Handler der Ereignisverarbeitungsfunktion nur einen falschen Wert zurückgibt, können Sie den Handler direkt auf false setzen.

Wenn das aktuelle Element mehrere untergeordnete Elemente hat, die mit dem Selektor übereinstimmen, wird die Ereignisbindung für das aktuelle Element entfernt, solange eines der untergeordneten Elemente die Ausführung der Ereignisverarbeitungsfunktion auslöst Die Ausführung kann nicht erneut ausgelöst werden.

Rückgabewert

one()Der Rückgabewert der Funktion ist vom jQuery-Typ und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel & Beschreibung

Bitte beachten Sie den folgenden anfänglichen 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>

Wir binden ein einmaliges Klickereignis an die Schaltfläche im obigen HTML:

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

Darüber hinaus können wir auch mehrere Ereignisse gleichzeitig binden und einige zusätzliche Daten an die Ereignisverarbeitungsfunktion übergeben. Dies können wir über den von jQuery übergebenen Parameter event (Ereignisereignisobjekt) tun die Ereignisverarbeitungsfunktion. Verarbeitung:

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

Wenn das Element, das die Bedingungen erfüllt, nach Ausführung der Funktion one() neu hinzugefügt wird, wird das Bindungsereignis weiterhin darauf wirksam. Am Beispiel des anfänglichen HTML-Codes können wir den folgenden jQuery-Code schreiben:

Hinweis: Obwohl der folgende jQuery-Code Klickereignisse an alle untergeordneten p-Elemente des n1-Elements bindet, ist der Ereignishandler selbst an gebunden Beim N1-Element wird das Klickereignis des Nachkommen-P-Elements zur Verarbeitung an das N1-Element delegiert. Solange einer von n2, n3 und n9 das Klickereignis auslöst, wird der an das Körperelement gebundene Ereignishandler entfernt. Mit anderen Worten: n2, n3 und n9 können die Ereignisverarbeitungsfunktion insgesamt nur einmal ausführen.

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

Bitte beziehen Sie sich noch einmal auf den folgenden jQuery-Code. Da es zwei div-Elemente gibt, verfügt jedes div-Element über einen Ereignishandler, der an das Click-Ereignis des untergeordneten p-Elements gebunden ist.

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsbeispiele für die jQuery.one()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!