jQuery: Events

Welcome to a new post of the jQuery tutorial, in this post we will be talking about ‘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()
$("#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

That’s it for this post. If you have any questions, problems, etc… just tell me in the comment. Make sure to follow me on WordPress and Twitter. See you in the next post.

 

— CODE DAILY

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