What exactly are events?

Events are all of the many visitor acts that a web page might respond to.

An event is a description of the exact moment that something happened.

Illustration: 

  • passing the mouse over a component
  • a radio button is enabled
  • loading a component

When it comes to occurrences, the term "fires/fired" is frequently employed. "When you press a key, the keypress event is fired," for instance.

Here are a few examples of DOM events:

Mouse Events:

  • click
  • dblclick
  • mouseenter
  • mouseleave

Keyboard Events: 

  • keypress
  • keydown
  • keyup

Form Events:

  • submit
  • change
  • focus
  • blur

Document/Window Events:

  • load
  • resize
  • scroll
  • unload

 


Syntax For Event Methods in jQuery

Several DOM events have a corresponding jQuery method in jQuery.

You can do the below to attach a click event to all sections on a page:

$("p").click();

The following step is to specify what should happen if the event happens. A function must be provided to the event:

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


jQuery Event Methods Which Are Commonly Used

$(document).ready()

When the document is completely loaded, we could use $(document).ready() method to run a function. This event is already covered in the chapter entitled jQuery Syntax.

click()

An callback function is attached to an HTML element using the click() technique.

When the user clicks on an HTML element, the function is activated.

When a click event occurs on a <p> element, hide the current <p> element, shown in the following Illustration:

EXAMPLE ❯


dblclick()

An event handler function is attached to an HTML element using the dblclick() technique.

When the user double-clicks on the HTML element, the function is called:

Illustration:

EXAMPLE ❯


mouseenter()

An event handler function is attached to an HTML element using the mouseenter() technique.

When the mouse pointer enters the HTML element, the function is called:

Illustration:

EXAMPLE ❯


mouseleave()

An event handler function is attached to an HTML element using the mouseleave() technique.

When the mouse pointer exits the HTML element, the function is called:

Illustration:

EXAMPLE ❯


mousedown()

An event handler function is attached to an HTML element using the mousedown() technique.

When the left, middle, or right mouse button is pressed when the mouse is over an HTML element, the function is called:

Illustration:

EXAMPLE ❯


mouseup ()

An event handler function is attached to an HTML element using the mouseup() technique.

When the left, centre, or right mouse button is released while the mouse is over the HTML element, the function is called:

Illustration:

 

EXAMPLE ❯


hover()

The hover() method is a mix of the mouseenter() and mouseleave() methods, and it takes two functions.

When the mouse enters the HTML element, the first function is called, and when the mouse exits the HTML element, the second function is called:

Illustration:

EXAMPLE ❯


focus()

An event handler function is attached to an HTML form field using the focus() technique.

When the form field receives focus, the function is called:

Illustration:

EXAMPLE ❯


blur()

An event handler function is attached to an HTML form field using the blur() method.

When the form field loses attention, the function is called:

Illustration:

EXAMPLE ❯


on()

on() is a method that allows you to turn something on or off. For the specified elements, the on() method adds one or more event handlers.

To add a click event to a <p> element, do the following:

Illustration:

EXAMPLE ❯