jQuery Events

0 1361

To make a page dynamic and responsive, we need to perform some actions on the HTML DOM elements.
These actions are called events.
Although JavaScript has several built-in ways of reacting to user interaction and other events, jQuery enhances and extends the basic event handling mechanisms to give them a more elegant syntax and making them more powerful.
Some examples of events are listed below:
A mouse click
Form submission
Loading a web page
Web page scrolling
Pressing a key on the keyboard
Mouse hover on an element

Related Topics:

jQuery Syntax

jQuery Selectors

jQuery Events

Some most useful HTML DOM events are listed below:

1 Mouse events:

click
dblclick
mouseenter
mouseleave

2 keyboard events:

keyup
keydown
keypress

3 form events:

submit
change
blur
focus

4 Document/Window Events:

load
unload
scroll
resize

The syntax for events in jQuery:

In the jQuery library, there is an equal range of methods for most of the DOM events.

For example: if you want to assign a click event on a button, the syntax is like:

$("button").click();

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

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

Example:

<html>
 <head>
 <title>jQuery Example</title>
 <script type = "text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
<script>
$(document).ready(function(){
  $(".bt").click(function(){
    $("body").css("background","pink");
  });
});
</script>
 </head>
 <body>

<h2>jQuery events Example</h2>

<button class="bt">Click me to change the color of background</button>

 </body>
</html>