Home > Article > Web Front-end > Example analysis of delegate and undelegate of JQuery event delegation mechanism
Example analysis of delegate and undelegate of JQuery event delegation mechanism
- 黄舟Original
- 2017-06-26 10:07:281120browse
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>
Method 1: Use JQuery selector to bind its own event handling function to each button.
$("#parent :button").click(function(){
alert($(this).attr("id"));
})
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"));
});
The function signature of delegate API is as follows:
##
delegate(selector, [type], [data], fn)
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!='b']","click",{},function(){
alert($(this).attr("id"));
});
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);
});
fn
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('<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>
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>
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!