Beispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus-js-Tutorial-php.cn

Beispielanalyse von Delegate und Undelegate des JQuery-Ereignisdelegierungsmechanismus

黄舟

Freigeben： 2017-06-26 10:07:28

Original

1212 Leute haben es durchsucht

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>

Nach dem Login kopieren

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"));
})

Nach dem Login kopieren

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"));
});

Nach dem Login kopieren

Die Funktionssignatur der Delegate-API lautet wie folgt:

delegate(selector, [type], [data], fn)

Nach dem Login kopieren

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"));
});

Nach dem Login kopieren

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);
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!