< Jquery Tutorial

Jquery Events

← Previous Next →


We have the ability to create dynamic web pages by using events. Events are actions that can be detected by your Web Application.

Following are the examples events −

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard

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


Here are some common DOM events:

Mouse Events  Keyboard Events  Form Events  Document/Window Events
click  keypress  submit load
dblclick  keydown  change  resize
mouseenter  keyup  focus  scroll
mouseleave    blur  unload

jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){
  // action goes here!!
});

Commonly Used jQuery Event Methods

$(document).ready() :The $(document).ready() method allows us to execute a function when the document is fully loaded.

click()

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.


dblclick()

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element:


mouseenter()

The mouseenter() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element:

 mouseleave()

The mouseleave() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element:

mousedown()

The mousedown() method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element

← Previous Next →