jQuery events handling

→ Are you a new visitor? Please visit the page guidance for new visitors ←

jQuery events handling

Here we are with our next tutorial about events handling in jQuery. We arrived pretty far. By now you should know how to select elements from the DOM, use them further from traversing and all kinds of manipulations.

What are events?

Events are actions that can be detected by your Web Application that the user perform on your webpage. We have the ability to create dynamic web pages by using events. Some example events are:

– when the user clicks somewhere

– when a page or the DOM is loaded

–  when a HTML form is submited

– when you press a key from your keyboard

– etc.

When these events are triggered you can then use a custom function to do pretty much whatever you want with the event.

Click event

You can determine when the user performs a click on your website by using this type of event, and then create an action for that (display new elements in page, hide the other one, or change the existing value for some of them). There are some different ways to attach an event, we will talk about them separately, but for now we will see an example of attaching a click event with the .bind method. Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() method as follows:

Parameters: selector.bind( eventType[, eventData], handler)

This is the description of the parameters:

  • eventType: A string containing a JavaScript event type, such as click or mouseleave. Refer to the next section for a complete list of event types.
  • eventData: This is optional parameter is a map of data that will be passed to the event handler.
  • handler: A function to execute each time the event is triggered.

Another way of binding an event to an element is to use the .on() method from jQuery.

See the difference? We attached the event using .on() method not .bind(). The result is the same. We can use another method again that is even easier:

Above we binded to the .click() directly. Below is a list with events that can be triggered the same way we did for the click event.

List with events

blur Occurs when the element loses focus
change Occurs when the element changes
click Occurs when a mouse click
dblclick Occurs when a mouse double-click
error Occurs when there is an error in loading or unloading etc.
focus Occurs when the element gets focus
keydown Occurs when key is pressed
keypress Occurs when key is pressed and released
keyup Occurs when key is released
load Occurs when document is loaded
mousedown Occurs when mouse button is pressed
mouseenter Occurs when mouse enters in an element region
mouseleave Occurs when mouse leaves an element region
mousemove Occurs when mouse pointer moves
mouseout Occurs when mouse pointer moves out of an element
mouseover Occurs when mouse pointer moves over an element
mouseup Occurs when mouse button is released
resize Occurs when window is resized
scroll Occurs when window is scrolled
select Occurs when a text is selected
submit Occurs when form is submitted
unload Occurs when documents is unloaded

The “ready” event

This event is widely used because it gives you possibility to detect when the DOM is fully loaded, and allow you to perform operations on it then. Let’s see an example:

We can use this to change the DOM structure and what the user sees in the page, right after the DOM was loaded, so inside the function, you can do anything you want from adding to removing elements.


Using jquery events you can detect user’s actions in your page. You can do whatever you want after you detect an action of the user, perform DOM operations or even math if you have to. You should have now an idea how events are working in jQuery. Stay tuned for the next tutorial.

Request an article ←