Informationen zu den Merkmalen der jQuery-Ereignisverarbeitung (Ereignisbenennungsmechanismus)

Dieser Artikel führt Sie hauptsächlich in einige Funktionen der JQuery-Ereignisverarbeitung und das damit verbundene Wissen über den JQuery-Ereignisbenennungsmechanismus ein. Die Einführung ist sehr detailliert und hat Referenzwert.

JQuery The bind() und unbind() stellen einen Mechanismus zum Binden und Abbrechen von Ereignissen bereit, der standardmäßig von HTML unterstützte Ereignisse sowie benutzerdefinierte Ereignisse binden kann. JQuery unterstützt benutzerdefinierte Ereignisse, was der Programmierung offensichtlich große Flexibilität verleiht. Lassen Sie uns gemeinsam einige Funktionen der JQuery-Ereignisverarbeitung lernen.

1. Ereignisse in JQuery können wiederholt gebunden werden und werden nicht überschrieben.

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

Wenn auf Button1 geklickt wird, werden diese beiden Event-Handler ausgelöst. Vielleicht werden Sie sagen, dass es sich bei den oben genannten Bindungen um unterschiedliche anonyme Funktionen handelt, die unterschiedliche Speicherplätze belegen. Dies ist zwar der Fall, aber selbst wenn es sich um dieselbe Verarbeitungsfunktion handelt, besteht immer noch ein Problem mit der doppelten Bindung. Wenn auf Button1 geklickt wird, wird auch die folgende Event-Handler-Funktion zweimal aufgerufen.

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

In den meisten Szenarien muss die Ereignisverarbeitungsfunktion nur einmal gebunden werden, daher müssen wir auf die wiederholte Bindungsfunktion von JQuery-Ereignissen achten, wenn das Ereignis mehrmals ausgeführt wird, auch wenn kein Fehler vorliegt , es ist doch keine gute Übung.

2. Verwenden Sie Bind, um mehrere Ereignisse und Verarbeitungsfunktionen gleichzeitig zu binden.

Wenn mehrere Ereignisse dieselbe Handler-Funktion registrieren müssen, können Sie zur Vereinfachung den folgenden Code verwenden (Ereignisnamen werden durch Leerzeichen getrennt):

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

Wenn die Handler-Funktion jedes einzelnen Ereignisses registriert werden muss Wenn das Ereignis anders ist, können Sie die folgende Methode (JSON-Objekt) verwenden:

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

3. Übergeben Sie das Ereignisobjekt und die benutzerdefinierten Parameter.

Im Allgemeinen benötigen wir bei der Verwendung von JQuery selten Ereignisobjekte und müssen keine benutzerdefinierten Parameter an Ereignisverarbeitungsfunktionen übergeben. Aber wenn wir das wirklich tun müssen, unterstützt JQuery es auch.

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 
alert("params=" + eventObject.data.name); 
});

eventObject ist dem Ereignisobjekt in IE und FF sehr ähnlich, über das Sie detailliertere Informationen erhalten können, wenn ein Ereignis auftritt. Wenn wir einen benutzerdefinierten Parameter angeben, fügt JQuery ihn in das Datenattribut des Ereignisobjekts ein, d. h. wir können den Parameterwert abrufen, den wir über eventObject.data übergeben haben.

3. Drei Formen der Veranstaltungsabsage.

unbind wird verwendet, um die zuvor durch bind gebundene Ereignisverarbeitungsfunktion abzubrechen. Im Allgemeinen gibt es drei Formen: alle Ereignisse abbrechen, einen bestimmten Ereignistyp abbrechen, einen bestimmten Ereignistyp abbrechen Funktion.

Angenommen, wir binden die Ereignisse Click, MouseUp und MouseDown an Button1, und das Click-Ereignis ist an zwei Verarbeitungsfunktionen gebunden.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

$("#button1").unbind(): Alle gebundenen Event-Handler auf button1 abbrechen.

$("#button1").unbind("click"): Nur den an button1 gebundenen Klicktyp-Ereignishandler abbrechen.

Diese beiden Formen sind leicht zu verstehen und auch die am häufigsten verwendeten Methoden in unserer täglichen Programmierung. Im obigen Code haben wir zwei Klickereignis-Verarbeitungsfunktionen registriert. Was sollen wir tun, wenn wir die zweite Klickereignis-Verarbeitungsfunktion abbrechen und die erste behalten möchten? Da wir eine anonyme Funktion registrieren, gibt es keine Möglichkeit, sie zu implementieren. Der folgende Code ist falsch und erzielt nicht den erwarteten Effekt.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

Obwohl binden und unbind dieselbe anonyme Funktion verwenden, sind diese beiden Funktionen nicht dasselbe JavaScript-Objekt, da sie unterschiedliche Speicherplätze belegen. Wenn Sie schlau sind, haben Sie vielleicht gedacht: Kann der Zweck erreicht werden, wenn Binden und Lösen unterschiedliche Funktionen verwenden? Dies ist tatsächlich der Fall, der folgende Code ist korrekt.

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

Dies ist die dritte Form der Verwendung von unbind. Sie sehen, dass dieser Ansatz sehr schlecht ist, da dieser Ansatz die Verwendung anonymer Funktionen nicht zulässt und wir globale Funktionen offenlegen müssen (zumindest unbind). erforderliche) Zeit ersichtlich). JQuery bietet einen Ereignis-Namespace-Mechanismus, der meiner Meinung nach dieses Problem lösen soll.

5. Ereignis-Namensraum.

Wie oben erwähnt, dient der Ereignis-Namespace dazu, die Probleme zu lösen, die bei der dritten Form der Bindungsaufhebung auftreten. Das Folgende ist eine Erklärung aus der offiziellen JQuery-API-Dokumentation:

Anstatt Verweise auf Handler zu verwalten, um sie zu entbinden, können wir die Ereignisse mit einem Namensraum versehen und diese Funktion nutzen, um den Umfang unserer Entbindungsaktionen einzugrenzen .

Der sogenannte Event-Namespace ist eigentlich das Anhängen eines Alias ​​in Punktsyntax nach dem Event-Typ, um auf das Event zu verweisen, wie zum Beispiel „click.a“, wobei „a“ der Alias ​​des ist Aktueller Ereignistyp des Klicks, d. h. der Ereignis-Namespace. Da der Punkt zum Definieren des Namespace verwendet wird, darf der Ereignisname den Punkt nicht enthalten, wenn wir ein benutzerdefiniertes Ereignis verwenden, da es sonst zu unerwarteten Problemen kommt. Es ist nicht nötig, diese Art von Problem auszuprobieren. Verwenden Sie, wenn möglich, Sonderzeichen, sonst machen Sie sich selbst Ärger.

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

Sie können sehen: Mithilfe von Namespace können Sie eine Ereignisverarbeitungsfunktion unter einem bestimmten Ereignistyp auf elegantere Weise abbrechen. Hier ist es erwähnenswert: Die Verwendung des Namespace steht nicht in Konflikt mit der Aufhebung der Bindung, und die oben genannten drei Formen der Aufhebung können weiterhin normal verwendet werden. $("#button1").unbind() kann weiterhin alle Ereignisse auf button1 abbrechen, und $("#button1").unbind("click") kann weiterhin alle Klickereignisse abbrechen. Dieses Kompatibilitätsdesign ist großartig.

使用命名空间还要1个好处：能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：

方式1：

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

方式2：

$("#button1").unbind(".a");

很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

jquery获取url参数及url加参数的方法

Jquery ajax技术实现间隔N秒向某页面传值

Das obige ist der detaillierte Inhalt vonInformationen zu den Merkmalen der jQuery-Ereignisverarbeitung (Ereignisbenennungsmechanismus). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!