Detaillierte Erläuterung der Verwendung der jQuery.bind()-Funktion

Die Funktion

bind() wird verwendet, um die Funktion Ereignisbehandlung 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.

Wenn bind() ausgeführt wird, wird die Event-Handler-Funktion an jedes passende Element gebunden. Daher verwenden Sie bind(), um das Klickereignis an alle Schaltflächenelemente zu binden. Sie binden das Klickereignis an jedes Schaltflächenelement, das zu diesem Zeitpunkt im Dokument vorhanden ist. Wenn Sie dem Dokument später ein neues Schaltflächenelement hinzufügen, wird das gebundene Ereignis darauf nicht wirksam. Wenn Sie möchten, dass das Bindungsereignis in Zukunft auch auf neu hinzugefügte Elemente wirksam wird, verwenden Sie bitte Ereignisfunktionen wie on(), delegate(), live() (versuchen Sie zunächst, die früheren Ereignisfunktionen zu verwenden).

Darüber hinaus können Sie 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 bind() gebundenes Ereignis zu löschen, verwenden Sie die Funktion unbind().

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

Syntax

Die Funktion bind() hat hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung eins:

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

Verwendung zwei: jQuery 1.4. 3 Unterstützung für diese Verwendung hinzugefügt.

jQueryObject.bind( events [, data ] [, isDefaultBubble ] )

Verwendung drei: jQuery 1.4 unterstützt diese Verwendung neu.

jQueryObject.bind( eventsMap )

Parameter

Parameterbeschreibung

events String type Ein oder mehrere Ereignistypen, getrennt durch Leerzeichen und einen optionalen Namespace, zum Beispiel „click ", "Fokusklick", "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.

isDefaultBubble Der optionale/boolesche Typ gibt an, ob das Standardverhalten des Elements und die Ereignissprudelung zugelassen werden sollen, wenn ein Ereignis ausgelöst wird. Der Standardwert ist wahr.

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

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

Dies im Parameterhandler zeigt auf das aktuelle DOM-Element. bind() ü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 die Ereignishandlerfunktion des Submit-Ereignisses (Formularübermittlung) false zurück, was die Übermittlung des Formulars verhindern kann.

Der Parameter isDefaultBubble wird verwendet, um anzugeben, ob das Standardverhalten und das Ereignis-Bubbling des Elements zulässig sind. Wenn der Wert falsch ist, wird das Standardverhalten des Elements (z. B. das Standard-Sprungverhalten eines Links, der ein Klickereignis auslöst, das Standard-Sendeverhalten eines Formulars, das ein Absendeereignis auslöst) und die sprudelnde Zustellung von Ereignissen verhindert.

Rückgabewert

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

Beispiele und Erklärungen

Nehmen Sie das Klickereignis („Klick“) als Beispiel. Im Folgenden wird die allgemeine Verwendung von Ereignisfunktionen in jQuery beschrieben (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 p").bind("click", function(){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

Darüber hinaus können wir auch mehrere Ereignisse gleichzeitig binden und einige zusätzliche Daten an die Ereignisverarbeitungsfunktion übergeben. Wir können das übergebene Parameterereignis (Ereignisereignisobjekt) übergeben Die Ereignisverarbeitungsfunktion über jQuery. Zu verarbeiten:

var obj = { id: 5, name: "王五" };
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj
// 附加数据可以是任意类型
$("#n5").bind("mouseenter mouseleave", obj, function(event){
    var $me = $(this);
    var obj = event.data; // 这就是传入的附加数据
    if( event.type == "mouseenter"){
        $me.html( "你好，" + obj.name + "!");
    }else if(event.type == "mouseleave" ){
        $me.html( "再见，" + obj.name + "!");      
    }           
} );

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

//为div中的所有p元素的click事件绑定事件处理函数
//只有n2、n3可以触发该事件
$("div p").bind("click", function(event){
    alert( $(this).text() );
});
// 新添加的n6不会触发上述click事件
$("#n1").append(&#39;<p id="n6">上述绑定的click事件不会对该元素也生效!</p>&#39;);

Parameter Events unterstützt auch zusätzliche Namespaces für Event-Typen. 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.bind( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.bind( "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")
bind()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：
var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};
//为n5绑定mouseenter mouseleave两个事件
$("#n5").bind( eventsMap );

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