Menu Close

Jquery Events

Priyanka
jquery-events

In this blog, we will learn about jquery events. Jquery events are actions that are performed by the web pages when different users visit the web pages. An event represents the exact moment when something happens.

The following examples are some events.

  • Moving a mouse over an element
  • Form submission
  • Scrolling of the web pages
  • Web page loading
  • Clicking on button

Some events lists:

Mouse Events

  • click
  • dblclick
  • mouseenter
  • mouseleave

Keyboard Events

  • keyup
  • keydown
  • keypress

Form Events

  • submit
  • change
  • focus
  • blur

Document/Window Events

  • load
  • unload
  • resize
  • scroll

Note: The term “fires” is generally used with events. For example: The click event fires in the moment you press a key.

Syntax for jquery event method

In the jquery, most DOM events have an equivalent jQuery method. To assign a click event to all paragraphs on a page, do the following step:

$("p").click();

Then you need to define what should happen when the event fires and to pass a function to the event:

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

Example:

click() method

The click() method is used to handle the function of the html element when the user clicks on the html element. Follow the below snippet to learn the click() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jquery click() method</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> 
        $(document).ready(function(){
            $("p").click(function(){
                alert("This paragraph was clicked."); 
            });
        }); 
    </script>
</head>
<body>
    <p>Click on the text.</p>   
</body>
</html>
Popular Posts
Total Views: 108
Posted in jQuery, Web Technologies
Tagged , ,

You can also read...