jQuery: Events


Events are basically actions, for example: when a button is clicked, or double click, or when the user hovers on a specific element, etc… These are events.

The most common jQuery events are:

  • $document.ready()
$(document).ready(function() {


The basic jQuery method to execute functions

  • click()

When something is clicked

  • dbclick()

When something is double clicked

  • mouseenter()

When a mouse enters on an element

  • mouseleave()

When a mouse leaves an element

  • mousedown()
    alert("Mouse down event detected");

When a mouse is pressed down while it is on an element

  • mouseup()
    alert("Mouse up event detected");

When a mouse is released while it is on an element

  • hover()

Hover is different, it is a combination of both, mouseenter() and mouseleave(), so when you are writing a hover event, you will likely be writing two functions/events.

  • focus()
    alert("Form is focused");

When you click on a form, the form now gains focus.

  • blur()
    alert("Form is blurred");

When you click outside the form, the form now loses focus(blur).

  • on()
    click: function(){
        alert("click event is detected");
    mouseenter: function(){
    mouseleave: function(){

Instead of having to target the element multiple times for multiple events, you use the on().

These were the basic or the most commonly used jQuery events, for more events: Click Here


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s