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

Die Funktion

on() wird verwendet, um die Funktion Ereignisbehandlung an ein oder mehrere Ereignisse des angegebenen Elements zu binden.

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

Ab jQuery 1.7 stellt die Funktion on() alle zum Binden von Event-Handlern erforderlichen Funktionen bereit und wird verwendet, um die vorherigen Event-Funktionen wie bind(), Delegate(), Live() einheitlich zu ersetzen. usw.

on() unterstützt Bindungsereignisse direkt am Zielelement und unterstützt auch die delegierte Bindung an die Vorgängerelemente des Zielelements. Im Ereignisdelegierungsbindungsmodus ist die gebundene Ereignisbehandlungsfunktion für das Element wirksam, auch wenn es sich nach Ausführung der Funktion on () um ein neu hinzugefügtes Element handelt, solange es die Bedingungen erfüllt.

Darüber hinaus kann diese Funktion mehrere Event-Handler an dasselbe Element und denselben Event-Typ binden. Wenn ein Ereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus.

Um ein über on() gebundenes Ereignis zu entfernen, verwenden Sie die Funktion off(). Wenn Sie ein Ereignis anhängen, es nur einmal ausführen und sich dann selbst löschen möchten, verwenden Sie die Funktion one().

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

Syntax

Diese Funktion wurde in jQuery 1.7 hinzugefügt. Es gibt hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung eins:

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

Verwendung zwei:

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

Parameter

Parameterbeschreibung

events Zeichenfolgentyp eins oder mehrere mit Leerzeichen getrennt Ereignistypen und optionale Namespaces, wie „click“, „focus click“, „keydown.myPlugin“.

eventsMap-Objekttyp ist ein Objektobjekt. Jedes Attribut entspricht dem Ereignistyp und dem optionalen Namespace (Parameterereignisse), und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion (Parameterhandler).

selector Optional/String-Typ Ein jQuery-Selektor, der verwendet wird, um anzugeben, welche untergeordneten Elemente gebundene Ereignisse auslösen können. Wenn dieser Parameter null ist oder weggelassen wird, bedeutet dies, dass das aktuelle Element selbst an das Ereignis gebunden ist (der eigentliche Auslöser kann auch ein untergeordnetes Element sein, solange der Ereignisstrom das aktuelle Element erreichen kann).

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.

Informationen zum optionalen Namespace in den Parameterereignissen 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.

Rückgabewert

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

Wichtiger Hinweis:

Wenn der Selector-Parameter übergeben wird, bindet die Funktion on() Ereignishandler nicht an Elemente, die mit dem aktuellen jQuery-Objekt übereinstimmen, sondern an ihre untergeordneten Elemente, die mit der Elementbindung übereinstimmen Ereignishandler des Selektorparameters des Selektors. Die Funktion on() bindet Ereignisse nicht direkt einzeln an diese untergeordneten Elemente, sondern delegiert die Verarbeitung an die übereinstimmenden Elemente des aktuellen jQuery-Objekts. Aufgrund des DOM-Level-2-Ereignisflussmechanismus wird das Ereignis an alle seine Vorfahrenelemente in der Ereignisblase übergeben, wenn der Nachkommenelementselektor ein Ereignis auslöst. Wenn der Ereignisfluss an das aktuell übereinstimmende Element übergeben wird, bestimmt jQuery, welches Wenn ein Ereignis ausgelöst wird und das Element mit dem Selektor übereinstimmt, erfasst jQuery das Ereignis und führt den gebundenen Ereignishandler aus.

Um es einfach auszudrücken: Wenn wir Click-Event-Handler an alle

-Tags binden möchten, können wir Click-Event-Handler direkt an jedes P-Tag separat binden. Zum Beispiel:

// Den Click-Event-Handler-Funktionshandler separat an alle P-Elemente binden

$("p").on("click", handler);

Wir können den Ereignisdelegierungsmechanismus auch an jedes gemeinsame Vorgängerelement dieser P-Tags binden und den Ereignis-Bubbling-Mechanismus des DOM verwenden, um die Delegationsverarbeitung zu vereinheitlichen. Wenn wir das Klickereignis eines Elements auslösen, benachrichtigt JS das Element und sein „übergeordnetes“ Element, „Großvater“-Element ... bis das oberste Dokumentobjekt ausgeführt wird Sequenz.

// Binden Sie den Handler der Click-Event-Verarbeitung an das Body-Element. Wenn das Click-Event durch sein untergeordnetes P-Element ausgelöst wird, führen Sie den Handler

$(document.body) aus. click", "p", handler);

Im Beispiel hier besteht der Ereignisdelegierungsmechanismus darin, dass wir den Click-Ereignishandler nicht direkt an jedes P-Element binden, sondern ihn an eines seiner öffentlichen Vorfahrenelemente (document.body im Beispiel hier) delegieren " ihn: Wenn eine Klickereignis-Triggerbenachrichtigung empfangen wird und das Klickereignis durch eines unserer P-Elemente ausgelöst wird, führen Sie den vom Delegaten gebundenen Ereignishandler für das Vorfahrenelement aus.

Hinweis: Einige Ereignisse wie „Fokus“ und „Unschärfe“ unterstützen das Bubbling nicht und der Mechanismus zur Ereignisdelegierung ist ungültig. Allerdings gibt es in der Regel auch entsprechende Ereignisse, die das Sprudeln unterstützen. Beispielsweise entspricht „focusin“ „focus“ und „focusout“ entspricht „blur“. Darüber hinaus können wir auch die Methode event.stopPropagation() verwenden, um das Sprudeln des aktuell ausgelösten Ereignisses zu stoppen.

Beispiele und Erklärungen

Nehmen Sie das Klickereignis („Klick“) als Beispiel. Im Folgenden wird die allgemeine Verwendung von Ereignisfunktionen in jQuery erläutert (einige Funktionen haben auch andere Verwendungsformen). werden hier noch nicht besprochen. Liste):

// 这里的选择器selector用于指定可以触发事件的元素
// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );
// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );
// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );
// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

Bitte beachten Sie den folgenden anfänglichen HTML-Code:

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

Wir binden Klickereignisse an alle

div>:

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

Wenn Sie alle

-Elemente binden möchten, können Sie den folgenden jQuery-Code schreiben:

//为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)
//n2、n3、n5均可触发该事件
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

Darüber hinaus können wir auch mehrere Ereignisse binden Gleichzeitig und Um einige zusätzliche Daten an die Ereignisverarbeitungsfunktion zu übergeben, können wir diese über den von jQuery für die Ereignisverarbeitungsfunktion übergebenen Parameter event (Ereignisereignisobjekt) verarbeiten:

var data = { id: 5, name: "张三" };
// 为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
// 附加数据可以是任意类型
$("body").on("mouseenter mouseleave", "#n5", data, function(event){
    var $me = $(this);
    var options = event.data; // 这就是传入的附加数据
    if( event.type == "mouseenter"){
        $me.html( "你好，" + options.name + "!");      
    }else if(event.type == "mouseleave" ){
        $me.html( "再见!");       
    }           
});
此外，即使符合条件的元素是on()函数执行后新添加，绑定事件对其依然有效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：
// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(event){
    alert( $(this).text() );
});
// 后添加的n6也可以触发上述click事件，因为它也是div中的p元素
$("#n1").append(&#39;<p id="n6">上述绑定的click事件对此元素也生效!</p>&#39;);

The Parameterereignisse unterstützen auch das Anhängen zusätzlicher Daten an den Ereignistyp. Beim Binden mehrerer Event-Handler desselben Typs an dasselbe Element. Mithilfe von Namespaces können Sie den Umfang des Auslösens oder Entfernens beim Auslösen von Ereignissen und beim Entfernen von Ereignissen einschränken.

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.on( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", clickHandler );
var $n2 = $("#n2");
//触发所有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")
// 移除所有p元素定义在foo命名空间下的click事件处理函数
$p.off( "click.foo" ); // 移除A
on()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：
var data = { id: 5, name: "张三" };
var events = {
    "mouseenter": function(event){
        $(this).html( "你好，" + event.data.name + "!");       
    },
    "mouseleave": function(event){
        $(this).html( "再见!");
    }       
};
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);

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