jQuery: Events

Definition

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()
$("#buttonOne").click(function(){
    $(this).hide();
});

When something is clicked

  • dbclick()
$("#buttonOne").dbclick(function(){
    $(this).hide();
});

When something is double clicked

  • mouseenter()
$("h1").mouseenter(function(){
    alert("Welcome");
});

When a mouse enters on an element

  • mouseleave()
$("h1").mouseleave(function(){
    alert("Bye");
});

When a mouse leaves an element

  • mousedown()
$("h1").mousedown(function(){
    alert("Mouse down event detected");
});

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

  • mouseup()
$("h1").mouseup(function(){
    alert("Mouse up event detected");
});

When a mouse is released while it is on an element

  • hover()
$("h1").hover(function(){
    alert("mouseenter()?");
});
function(){
    alert("mouseleave()?");
});

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()
$("input").focus(function(){
    alert("Form is focused");
});

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

  • blur()
$("input").blur(function(){
    alert("Form is blurred");
});

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

  • on()
$("h1").on({
    click: function(){
        alert("click event is detected");
    },
    mouseenter: function(){
        alert("mouseenter()");
    },
    mouseleave: function(){
        alert("mouseleave()");
    }
});

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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s