JQuery Events
Events are used to make a web page interactive.When user clicks on buton then button click event gets fire.
There are lots of events which make web page interactive.e.g. button click, dropdown has value change, mouse click or DBClick etc.
There are different ways in Jquery by which a develoer a attach events to a control-
1-Bind Method-The .bind() method registers the type of event and an event handler
directly to the DOM element.
Ex- $( "#bthSubmit" ).bind( "click", function() {
alert( "Page has been submitted by the user." );
});
The .bind() method will attach the event handler to all of the element that are matched!.
It's not good, if we consider page performance.
Not only is that expensive to implicitly iterate over all of those items to attach an event
handler, but it is also wasteful since it is the same event handler over and over again.
Pros-1-This methods works across various browser implementations.
2-It is pretty easy and quick to wire-up event handlers.
Cons: 1-The method attaches the same event handler to every matched
element in the selection.
2-It doesn't work for elements added dynamically that matches the same selector.
2-Live()-live method attaches the event handler to the root level document along with the
associated selector and event information.
Once an event is raised, jQuery looks at the selector/event metadata
to determine which handler it should invoke, if any.
This extra work has some impact on performance at the point of user interaction,
but the initial register process is fairly speedy.
The good thing about this code as compared to the .bind() example above is that it is
only attaching the event handler once to the document instead of multiple times.
This not only is faster, but less wasteful.
Ex-$( "#btnSubmit" ).live( "click", function( e ) {} );
Pros:1-There is only one event handler registered instead of the numerous event handlers
that could have been registered with the .bind() method.
2-Elements dynamically added to the DOM that match the selector magically work
because the real information was registered on the document.
Cons:1-This method is deprecated as of jQuery 1.7 and you should start phasing out its use in
your code.
2-Chaining is not properly supported using this method and using event.stopPropagation()
is no longer helpful.
3-matchesSelector method to determine which event handler to invoke, if any.
Your events always delegate all the way up to the document. This can affect performance
if your DOM is deep.
3-Delegate Method:The .delegate() method behaves in a similar fashion to the .live() method,
but instead of attaching the selector/event information to the document you can choose where
it should be attached.
The selector and event information Just like the .live() method, this technique uses event
delegation to work correctly.
Example-$( "#menu" ).delegate( "li a", "click", function( e ) {//write your logic here} );
The above code will attach the event handler to the unordered list ("#members") along with the
selector/event information. This is much more efficient than the .live() method that always
attaches the information to the document.
Pros:
1-You have the option of choosing where to attach the selector/event information.
Events here are generally registered at the root element.
JQuery still needs to iterate over the selector/event data to determine a match,but since you
can choose where the root is the amount of data to sort through can be much smaller.
2-Chaining is supported correctly.
3-Since this technique uses event delegation, it can work with dynamically added elements
to the DOM where the selectors match.
Attaching multiple events-
Ex-$( "#foo" ).bind({ click: function()
{ // Do something on click
},
mouseenter: function()
{ // Do something on mouseenter
} });
To detach a event you can use .unbind(), .die(), and .undelegate() methods.
1-Unbind: $(selector).unbind(event,function,eventObj)
Event is Optional. Specifies one or more events to remove from the elements.Multiple event values are separated by space.
If this is the only parameter specified, all functions bound to the specified event will be removed.
Function Optional. Specifies the name of the function to unbind from the specified event for the element
EventObj Optional. Specifies the event object to remove to use. The eventObj parameter comes from the event binding function
2-Die: $( "p" ).die(); or $( "p" ).die( "click" );
3- undelegate (): $("body").undelegate();
or $("body").undelegate("p", "click", changeSize);