HTML CSS JAVASCRIPT JQUERY LIQUID

jQuery Event Methods

❮ Previous Next ❯

jQuery is specifically designed to react to actions happening on a webpage.

What are Events?

Events on a webpage are actions by visitors that the page can respond to.

An event is like a specific point in time when something occurs.

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

The word "fires" or "fired" is commonly used when talking about events. For instance, when you press a key, it triggers the keypress event immediately.

Here are a few typical events that occur in the Document Object Model (DOM):

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, there's typically a matching jQuery function for most DOM events.

To make something happen when you click on all the paragraphs on a webpage, you can do this:

$("p").click();

The following step is to specify what needs to occur when the event takes place. To do this, you must provide a function for the event.

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

Commonly Used jQuery Event Methods

$(document).ready()

The $(document).ready() method lets us run a function once the entire document is ready. You can find more information about this event in the jQuery Syntax chapter.

click()

The click() method links a function that handles events to an HTML element.

The action happens when someone clicks on an HTML element.

In this example, it means that when someone clicks on a paragraph (<p> ) on a webpage, the paragraph that was clicked on should disappear.

dblclick()

The dblclick() method links a function that handles events to an HTML element.

This function runs when the user double-clicks on an HTML element.

mouseenter()

The mouseenter() method connects a special function to an HTML part when you move your mouse over it.

The function runs when the mouse arrow goes into the HTML element.

mouseleave()

The mouseleave() method connects a special function to an element in an HTML document.

The function runs when the mouse pointer exits the HTML element.

mousedown()

The mousedown() method connects a function to an HTML element that responds when you click on it.

The function activates when you click any mouse button (left, middle, or right) on the HTML element.

mouseup()

The mouseup() function links a special action to an element on a webpage.

The function runs when you let go of the mouse button (left, middle, or right) while the mouse is on the HTML element.

hover()

The hover() method needs two functions and it's like mixing the mouseenter() and mouseleave() methods.

The initial function runs when the mouse goes over the HTML element, and the second one runs when the mouse moves away from the HTML element.

focus()

The focus() method connects a special function to an area in an HTML form.

The function runs when someone clicks on or selects a form field:

blur()

The blur() method connects a function that handles events to an HTML form field.

The function runs when you click outside the form field.

The on() Method

The on() method connects event handlers to chosen elements, allowing one or more handlers to respond to events.

Add a click action to a <p> element:

You can link several actions to a <p> section by following these steps:
❮ Previous Next ❯