Heim > Artikel > Web-Frontend > Beispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus
Beispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus
- 黄舟Original
- 2017-06-26 10:07:281120Durchsuche
Stellen Sie sich das folgende Szenario vor: Wenn es 3 Schaltflächen unter 1 p gibt und Sie auf jede Schaltfläche klicken, müssen Sie die ID der aktuellen Schaltfläche ausdrucken.
<p id="parent"> <input type="button" id="a" value="1"></input> <input type="button" id="b" value="2"></input> <input type="button" id="c" value="3"></input> </p>
Methode 1: Verwenden Sie den JQuery-Selektor, um eine eigene Ereignisbehandlungsfunktion an jede Schaltfläche zu binden.
$("#parent :button").click(function(){
alert($(this).attr("id"));
})
Methode 2: Verwenden Sie den Ereignisdelegierungsmechanismus, um Ereignisse nur an das übergeordnete Element der Schaltfläche zu binden.
$("#parent").delegate(":button","click",function(){
alert($(this).attr("id"));
});
Die Funktionssignatur der Delegate-API lautet wie folgt:
delegate(selector, [type], [data], fn)
Selektor:
stellt den Selektor in JQuery dar, der zum Filtern von Elementen verwendet wird, die Ereignisse auslösen. Unterhalb des übergeordneten Elements befinden sich drei Schaltflächen a, b und c. Wenn auf die Schaltfläche b geklickt wird, wird ihre ID nicht gedruckt. Dann kann dies durch den folgenden Code erreicht werden:
$("#parent").delegate(":button[id!='b']","click",{},function(){
alert($(this).attr("id"));
});Typ:
angehängt an Ein oder mehrere Ereignisse für das Element, wobei mehrere Ereigniswerte durch Leerzeichen getrennt sind.
Daten
Der Parameter--Wert, der an die Ereignisbehandlungsfunktion übergeben wird.
$("#parent").delegate(":button","click",{name:123},function(event){
alert(event.data.name);
});fn
Die Handlerfunktion wird aufgerufen, wenn ein Ereignis auftritt.
delegate() hat auch eine sehr wichtige Eigenschaft: Event-Handler, die die Delegate()-Methode verwenden, gelten für Elemente, die derzeit vorhanden sind oder in Zukunft hinzugefügt werden.
Wenn wir im Code unten auf die Testschaltfläche klicken, wird eine neue -Schaltfläche generiert, wenn auf diese neu generierte -Schaltfläche geklickt wird , seine ID wird weiterhin gedruckt.
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$("#parent").delegate(":button","click",function(event){
alert($(this).attr("id"));
});
$("#test").click(function(event){
$("#parent").append('<input type="button" id="d" value="4"></input>');
});
})
</script>
<body>
<input type="button" id="test" value="test">
<p id="parent">
<input type="button" id="a" value="1"></input>
<input type="button" id="b" value="2"></input>
<input type="button" id="c" value="3"></input>
</p>
</body>
Und wie macht Delegate() das? Was ist mit? Es ist sehr einfach, indem Sie den Ereignis-Bubbling-Mechanismus in Javascript verwenden. Wenn ein untergeordnetes Element ein Ereignis generiert und die Weitergabe dieses Ereignisses nicht verboten ist , nimmt das übergeordnete Element dieses Ereignis ebenfalls wahr (der Ereignishandler des übergeordneten Elements wird aufgerufen). Und über das Event-Objekt können Sie das Element abrufen, das das Ereignis ursprünglich ausgelöst hat. Im folgenden Code haben wir selbst einen einfachen Mechanismus zur Ereignisdelegierung implementiert.
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$("#parent").click(":button",function(event){
// target是最初触发事件的DOM元素。
var domId = event.target.id;
// 过滤元素
var filter = event.data;
if($(event.target).is(filter))
{
alert(domId);
}
});
})
</script>
<body>
<p id="parent">
<input type="button" id="a" value="1"></input>
<input type="button" id="b" value="2"></input>
<input type="button" id="c" value="3"></input>
<input type="text" id="d" value="d"></input>
</p>
</body>
Delegate und Undelegate sind beim Binden und Entbinden sehr ähnlich: Verwenden Sie Undelegate für Event-Delegation abbrechen Dabei können Sie auch den Event--Namespace--Mechanismus verwenden. In diesem Artikel werden Bind und Unbind als Beispiele verwendet, um den Ereignis-Namespace-Mechanismus und seine Verwendung im Detail vorzustellen.
Das obige ist der detaillierte Inhalt vonBeispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!