jQuery events examples

When we add any jquery functionality to our web page, we want the function to be executed with some events, there are way to attach the event to html element using either id or class, in this tutorial you will learn jquery events how to attach jquery events to html element.

$("#btnHide").click(function () {
    $(this).hide();
});

In above code "click" is the event, hide is the functionality, and we want the event to be executed on some button click.

So, What are the jQuery Events?: Any type of action that visitor performs on web page using mouse or keyboard is called events

Attach jquery events to html element

As a web designer or developer you are probably familiar with different type of events like mouse events, keyboard events, browser events, DOM element events; and you often need to perform many task using different events in web development life cycle

$("#btnHover").hover(function () {
			// some code to be executed 
    });

In above code we are attaching the "hover" event to button id "btnHover".

Commonly used events are: load, click , scroll, unload, resize, mouseover, mouseout, mousemove, mouseenter, keydown, keypress, keyup, select, submit, change, error etc.

Here are some example of how you can capture jquery browser events , you can see how jquery events get attached to element or jquery get events bound to element

• $(document).ready() example

  $(document).ready(function () {
      
  });
  

• Click() method can be attached to any html element , so when click happen on that particular element then this click method gets executed

  For example here we have captured the button click event, and we can write any code to be executed there.

  $(document).ready(function () {
      $("#btnHide").click(function () {
          $(this).hide();
      });
  });
  

• In hover() method actually two events happen, once pointer enter and when it leave, So we can write code for both events mouseenter() and mouseleave() methods.

  $(document).ready(function () {
      $("#btnHover").hover(function () {
                $("#btnHover").val("hovering this button");
      });
      $("#btnHover").mouseleave(function () {
                      $("#btnHover").val("Bye! Come Again");
                  });
  });
  

Like above examples you can attach all following events to any html element using jQuery.

You can handle all type DOM events using jQuery library

• Keyboard events
  • keypress - onkeypress
  • keydown - onkeydown
  • keyup - onkeyup
• Mouse events
  • click - onclick
  • hover
  • mouseenter - onmouseenter
  • mousedown - onmousedown
  • mousemove - onmousemove
  • mouseover - onmouseover
  • mouseout - onmouseout
  • mouseup - onmouseup
• Document
  • Load - onload
  • Ready
  • Unload - onunload
  • Error - onerror

In web development most of the time you may find these DOM manipulation methods very useful: click (), change (), submit (), mouseenter(), mouseleave(), hover(),keyup(), keydown() etc. You also can check full list of events