Jquery Handling Elements
Learn to use jQuery to methods handle different types of event methods
jQuery Events: Handling Events
The jQuery provides a set of methods to working with event related features. These methods allows you to register event functions that are called when specified events are triggerted on elements you want to.
Table : Methods for Handling Events
bind(eventType, data, function)
|To add an event handler to the element in a jQuery object with a optional data item.|
|bind(eventType, boolean)||To create a default handler that always return false, preventing the defualt action.|
|bind(map)||To add a set of event handlers based on a map object to all elements in the jQuery object.|
one(eventType, data, function)
|To add an event handler to each element in a jQuery object with an optional data item.|
|unbind()||To removes all event handlers on all elements in the jQuery object.|
|unbind(eventType)||To removes a previously registered event handlers from all elements in the jQuery object|
|unbind(eventType, boolean)||To remove a previously registered always-false handler from all elements in the jQuery Object|
|unbind(Event)||To removes an event handler using an Event Object|
jQuery Events : Using the bind() Method
The jQuery bind() method is used to let you specify a function that will be invoked when an event is triggered.
Example: Using the bind() MethodGive it a TRY! » Note: It returns a jQuery Object, which can be used for chaining purposes
jQuery Events : Registering a Function to Handle Multiple Events
The jQuery bind() method can be assigned a single function to handle two or multiple types of events, these events generally are related to each other in some sense.Eg: keyup and keydown
Example: Registering a Function to Handle Multiple EventsGive it a TRY! » Note:It Binds handler to be called when a given type of event is sent to the element.
jQuery Events : Map Object to Register Event Handlers
The jQuery method of bind() can be assigned event handler using a Map Object.
The properties of the object are the names of the events, and their values are the functions that will get invoked when the events are triggered.
Example: jQuery Events: Register Event Handlers using Map ObjectGive it a TRY! » Note:The method can take one or more class names as its parameter.
jQuery Events : Supplying Data to the Event Handlers Function
The jQuery method of bind(eventType, data, function) is used to pass an object to bind method.
This object is then made available to the handler function using the Event.data property, this is useful when you intent to use a single function to handle events from different set of elements.
Example: Supplying Data to the Event Handlers FunctionGive it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.
jQuery Events : Supressing the Default Action
Some events have a default action associated with them, these actions are triggered when these events occur. Eg : click, hover.
But you can prevent the default action by making use of the method preventDefault on the Event object.
Example: Suppressing the Default Action on EventsGive it a TRY! » Note: preventDefault() stops the events in its tracks before the default action occurs.
jQuery Events : Removing Event Handler Function
The jQuery method of unbind() is used to remove a handler function from an element.
If no argument is supplied with the unbind() method then all of the event handlers associated with the element are removed.
Example: Removing Event Handlers FunctionGive it a TRY! » Note:The method unbind() removes all mouse event bindings from the Element
jQuery Events : Unbinding Specific Events
The jQuery method of unbind(eventType) is used to selectively unbind specific events, leaving other events untouched.
Example: Unbinding Specific EventsGive it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.
jQuery Events : Unbinding from within the Event Handler Function
Another way to unbind() event is to perform this from within the event handler function. However, this technique is useful only if you want to handle an event a certain number of times.
Example: Unbinding from within the Event Handler Function.Give it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.
jQuery Events : Executing an Event Handler only Once
The jQuery method of one(eventType, function) is used to register an event handler that will be executed only once for an element and then removed.