Heim >Web-Frontend >js-Tutorial >Beispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus

Beispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus

黄舟Original: 2017-06-26 10:07:281213Durchsuche

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!=&#39;b&#39;]","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);
});

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(&#39;<input type="button" id="d" value="4"></input>&#39;);
			
		});
	})
</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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung des Unterschieds zwischen der Verwendung von „on“ anstelle von „delegate“ und „live“ in jQueryNächster Artikel：Detaillierte Erklärung des Unterschieds zwischen der Verwendung von „on“ anstelle von „delegate“ und „live“ in jQuery

In Verbindung stehende Artikel

Mehr sehen