jQuery Events

When user interats with the web page an event is generated.
In other words events are actions or occurrences that happen on a web page.
In jOuery handling events is easy as they are simplified.
Here are the selector types and its syntax in jQuery

Event Type

Example

Description

Click Event

$("button").click(function(){ /* code */ });

Triggered when a user clicks on an element.

Double Click Event

$("p").dblclick(function(){ /* code */ });

Triggered when a user double-clicks on an element.

Mouse Enter Event

$("div").mouseenter(function(){ /* code */ });

Triggered when the mouse pointer enters an element.

Mouse Leave Event

$("div").mouseleave(function(){ /* code */ });

Triggered when the mouse pointer leaves an element.

Hover Event

$("button").hover(function(){ /* mouse enter code */ }, function(){ /* mouse leave code */ });

Combines mouse enter and mouse leave events.

Key Press Event

$(document).keypress(function(event){ /* code */ });

Triggered when a key is pressed.

Submit Event

$("form").submit(function(){ /* code */ });

Triggered when a form is submitted.

Change Event

$("input").change(function(){ /* code */ });

Triggered when the value of an input changes.

Resize Event

$(window).resize(function(){ /* code */ });

Triggered when the window is resized.

Scroll Event

$(window).scroll(function(){ /* code */ });

Triggered when the user scrolls.


Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Events Example</title>
  <!-- Include jQuery from a CDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 10px;
      text-align: center;
      line-height: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>jQuery Events Example</h1>

  <button id="clickBtn">Click Me</button>

  <p id="dblClickPara">Double Click Me</p>

  <div id="mouseEnterDiv">Mouse Enter</div>
  
  <form id="submitForm">
    <label for="textInput">Type Something:</label>
    <input type="text" id="textInput">
    <input type="submit" value="Submit">
  </form>

  <script>
    // Click Event
    $("#clickBtn").click(function(){
      alert("Button Clicked!");
    });

    // Double Click Event
    $("#dblClickPara").dblclick(function(){
      alert("Paragraph Double Clicked!");
    });

    // Mouse Enter Event
    $("#mouseEnterDiv").mouseenter(function(){
      $(this).css("background-color", "lightgreen");
    });

    // Mouse Leave Event
    $("#mouseEnterDiv").mouseleave(function(){
      $(this).css("background-color", "lightblue");
    });

    // Submit Event
    $("#submitForm").submit(function(event){
      event.preventDefault();
      alert("Form Submitted!");
    });
  </script>

</body>
</html>

Quick Recap - Topics Covered

jQuery Events

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message