Beispiel für jQuery bind () und uncind ()
Die Funktion jQuerybind()wird verwendet, um einen Ereignishandler an Elemente anzuhängen, während mitunbind() ein vorhandener Ereignishandler von Elementen getrennt wird.
Beispiele
Einfacher HTML-Code für die Demonstration.
Mouseover Me, Click Me or Double Click Me
1. binden()
jQuery bietet vollständige Unterstützung für JavaScript-Ereignistypen wie "click", "dblclick" oder benutzerdefinierte Ereignisnamen.
Binden Sie ein Ereignis mit einem Klick an Elemente mit der ID "BoxId".
$("#BoxId").bind("click", (function () {
$('span').text("Single Clicked");
}));
Binden Sie ein Doppelklick-Ereignis an Elemente mit der ID "BoxId".
$("#BoxId").bind("dblclick", (function () {
$('span').text("Double Clicked");
}));
2. bind () + Ereignisobjekt
jQuery enthält viele Ereignisobjekte, um weitere Informationen zur Benutzerumgebung zu erhalten. Überprüfen Sie hier, objQuery event object details vorhanden sind.
Binden Sie ein "Mouseover" -Ereignis mit einem Ereignisobjektparameter an Elemente mit der ID "BoxId".
$("#BoxId").bind("mouseover", (function (event) {
$('span').text('The mouse cursor is at ('
+ event.pageX + ', ' + event.pageY + ')');
}));
3. bind () + Ereignisdaten
Dies bedeutet, dass benutzerdefinierte Parameterdaten an Ihre bind () - Funktion übergeben werden.
Binden Sie ein Einzelklick-Ereignis und übergeben Sie eine benutzerdefinierte Nachricht als Parameter an Elemente mit der ID "BoxId". Innerhalb der Funktion können Sie mit Hilfe vonevent.data auf die Parameternachricht zugreifen.
var name = 'Message pass by jQuery event data';
$("#BoxId").bind("click", {msg: name},(function (event) {
$('span').text("Single Clicked - " + event.data.msg);
}));
4. bind () + Mehrere Ereignisse
Um mehrere Ereignisse miteinander zu verbinden, können Sie jedes durch ein Leerzeichen trennen.
Binden Sie Einzelklick- und Doppelklick-Ereignisse an Elemente mit der ID "BoxId".
$("#BoxId").bind("click dblclick", (function () {
$('span').text("Single Clicked");
}));
Alternativ können Sie auch wie folgt codieren: (Supported in jQuery 1.4).
$("#BoxId").bind({
click : function(){
$('span').text("Single Clicked");
},
dblclick : function(){
$('span').text("Double Clicked");
}
});
5. unbind()
Das Aufheben oder Trennen der Bindung bestehender Ereignisse ist ganz einfach. Sie müssen lediglich den angehängten Ereignistyp angeben.
Das Ereignis "click" und "dblclick" von Elementen mit der ID "BoxId" getrennt.
$('#BoxId').unbind("click");
$('#BoxId').unbind("dblclick");
Versuch es selber
jQuery bind() and unbind() example
Mouseover Me, Click Me or Double Click Me