Example analysis of delegate and undelegate of JQuery event delegation mechanism-JS Tutorial-php.cn

Example analysis of delegate and undelegate of JQuery event delegation mechanism

黄舟

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

Original

1208 people have browsed it

Consider the following scenario: If there are 3 buttons under 1 p, when each button is clicked, the ID of the current button needs to be printed.

<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>

Copy after login

Method 1: Use JQuery selector to bind its own event handling function to each button.

$("#parent :button").click(function(){
	alert($(this).attr("id"));
})

Copy after login

Method 2: Use the event delegation mechanism to only bind events to the parent element of the button.

$("#parent").delegate(":button","click",function(){
	alert($(this).attr("id"));
});

Copy after login

The function signature of delegate API is as follows:

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

Copy after login

selector :

represents the selector in JQuery, used to filter elements that trigger events. There are three buttons a, b, and c below the parent element above. If button b is clicked, its ID will not be printed. Then it can be achieved through the following code:

$("#parent").delegate(":button[id!=&#39;b&#39;]","click",{},function(){
	alert($(this).attr("id"));
});

Copy after login

type:

Appended to the element One or more events, with multiple event values separated by spaces.

data

The parameter value passed to the event handling function.

$("#parent").delegate(":button","click",{name:123},function(event){
	alert(event.data.name);
});

Copy after login

The handler function called when an event occurs.

delegate() also has a very important property: event handlers using the delegate() method apply to elements that currently exist or will be added in the future.

In the following code, when we click the test button, a new button will be generated. When this newly generated button is clicked , its id will still be printed.

<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>

Copy after login

So how does delegate() do it
Woolen cloth? It's very simple, using the event bubbling mechanism in javascript. When a child element generates an event, if the propagation of this event is not prohibited, then the parent element will also perceive this event (the event handler on the parent element is called). And through the Eventobject, you can get the element that originally triggered the event. In the code below, we have implemented a simple event delegation mechanism ourselves.

<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>

Copy after login

delegate and undelegate are very similar to bind and unbind. Here is a mention: when using undelegate to cancel event delegation , you can also use the event
namespace mechanism. This article uses bind and unbind as examples to introduce the event namespace mechanism and how to use it in detail.

The above is the detailed content of Example analysis of delegate and undelegate of JQuery event delegation mechanism. For more information, please follow other related articles on the PHP Chinese website!