In the learning process of jQuery, I found the bind event of jQuery which you can use with bind() method or can use on() method, someone use delegate() or live(). But all do the same process that is Event Delegation.I have used all but do not fully understand the difference between all.
So, The Simple reason of so many types of binding method is the updated version of jQuery added on () method for version 1.7 and later.
If you are using jQuery constantly for your web application, You may have heard about the event delegation concept of jQuery. Event Delegation concept is very convoluted design pattern which is useful when you want to add the event to an element which are the child element of any element.
What is Event Delegation?
DOM Structure of scripting language is complex to understand.Event Delegation is an optimization technique for event binding of DOM element by using the principle of event bubbling through binding events to the parent element.
SYNTAX:
1 2 3 | jQueryObject . delegate (selector, types, data, fn ); |
New Delegate Function Syntax:
1 2 3 | on(events,[selector],[data],fn) |
Example:
1 2 3 | $ ( "ancestor" .) on ( "Click" , "Selector" [, Data ], handler ); |
Parameters
Events: You can enter one or more space-separated event types such as “click”.
Selector: A selector string for the descendant selector filter element triggering event.
Data: is optional.When an event is triggered, data will be passed to the event handler.
Fn: Function called when the event is triggered.
.on() event delegation method to bind the currently selected elements with the jQuery object. Before jQuery 1.7, .bind(),.delegate() and .live() three different methods were used for the event delegation in jQuery. Now, only .on() method is used and provides all the functionality required to bind event handlers.To attach an event that runs only once, you can use the .one () method.
Official documentation suggests:
As of jQuery 1.7, the .on () method is the preferred method for attaching event handlers to a document.
.bind() method is directly bind the element whereas .live() method is a way to bind by bubbling elements. But .delegate () is a more accurate than the .live () method and .on() method is a new binding mechanism.
1 2 3 4 5 | $ ("#id"). on('click', function () { // do something }) |
As above code, the click event bind to the document object and when the click event occurs on any element of the page to be processed, propagate the document object.
Let’s check below HTML Code:
Here in the html, placed a div and several p tags inside the div element.When to click the p elements. P elements on the page we will bind click event.
1 2 3 4 5 6 7 8 | <div id="divid"> <p id="pid1">Paragraph1</p> <p id="pid2">Paragraph2</p> <p id="pid3">Paragraph3</p> </div> <p id="pid4">Paragraph4</p> |
Now following jQuery code will perform Event Delegation on the div with parent element id. Here I am going to bind the event to all elements which are the child of div.
Now lets see the actual code:
1 2 3 4 5 6 7 | // To Get the object of parent Element $( "div" ).delegate( "p" , "click" , function () { // Here this points to trigger a click event of p elements }); |
Using delegate method, you can accurately locate the event and event bubbling overhead can be reduced.If this article helped you, then don’t forget to share it on Facebook and join thecreativedev on Facebook.
