Search within TutorialsPark

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

Method Description
bind(eventType, function)
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, function)
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() Method

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

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

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

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

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

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

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

Example: Executing an Event Handler only Once.

Give it a TRY! » Note:Once Executed the handler is removed automatically for Ever.