In jQuery, events are actions that can be triggered by the user (like clicks, mouse movements, keyboard actions, etc.) or other system activities. jQuery makes it easy to manage these events, such as binding, triggering, and handling event listeners. You can add event listeners to elements like buttons, forms, divs, etc., and execute code when specific events occur.

? Common jQuery Events

? 1. .click()

The .click() event is triggered when an element is clicked. You can bind this event to any clickable element like buttons, links, or divs.

Example:

html
"#clickBtn").click(function() {    $("#message").text("Button was clicked!");  });</script>

Explanation:

• When the #clickBtn button is clicked, the text "Button was clicked!" is added to the #message div.

? 2. .dblclick()

The .dblclick() event is triggered when an element is double-clicked.

Example:

html
"#dblClickBox").dblclick(function() {    $("#message").text("Box was double-clicked!");  });</script>

Explanation:

• When the #dblClickBox is double-clicked, the text "Box was double-clicked!" is added to the #message div.

? 3. .hover()

The .hover() event is a combination of mouseenter and mouseleave. It can be used to perform actions when the mouse enters or leaves an element.

Example:

html
"#hoverBox").hover(    function() {      $(this).css("background-color", "yellow"); // Mouse enters    },    function() {      $(this).css("background-color", "green"); // Mouse leaves    }  );</script>

Explanation:

• When the mouse enters the #hoverBox, its background color changes to yellow.

• When the mouse leaves the #hoverBox, its background color changes back to green.

? 4. .focus() and .blur()

The .focus() event is triggered when an element gains focus (e.g., when a user clicks into an input field). The .blur() event is triggered when an element loses focus (e.g., when the user clicks outside the input field).

Example:

html
"#nameInput").focus(function() {    $("#message").text("Input field is focused!");  });  $("#nameInput").blur(function() {    $("#message").text("Input field lost focus!");  });</script>

Explanation:

• When the #nameInput input field gains focus, the message "Input field is focused!" is displayed.

• When the #nameInput input field loses focus, the message "Input field lost focus!" is displayed.

? 5. .keypress(), .keydown(), and .keyup()

• .keypress(): Triggered when a key is pressed down, typically used for character input.

• .keydown(): Triggered when a key is pressed down (before it is released).

• .keyup(): Triggered when a key is released.

Example of .keydown():

html
"#inputText").keydown(function() {    $("#keyMessage").text("A key was pressed!");  });</script>

Explanation:

• When a key is pressed inside the #inputText input field, the text "A key was pressed!" is displayed in the #keyMessage div.

? 6. .submit()

The .submit() event is triggered when a form is submitted. It can be used to handle form submissions in jQuery.

Example:

html
"#myForm").submit(function(event) {    event.preventDefault(); // Prevents the form from submitting the traditional way    $("#message").text("Form Submitted!");  });</script>

Explanation:

• When the form with id="myForm" is submitted, it prevents the default action (traditional form submission) and shows the message "Form Submitted!".

? 7. .change()

The .change() event is triggered when the value of a form element (like an input, select box, or textarea) changes.

Example:

html
"#colorSelect").change(function() {    var selectedColor = $(this).val();    $("#colorMessage").text("You selected: " + selectedColor);  });</script>

Explanation:

• When the user selects an option from the dropdown (#colorSelect), the message "You selected: [color]" is displayed.

? 8. .resize()

The .resize() event is triggered when an element or the window is resized.

Example:

html
window).resize(function() {    $("#box").text("Window resized!");  });</script>

Explanation:

• When the window is resized, the #box div's text changes to "Window resized!".

? Summary of jQuery Event Methods

• .click(): Triggered on a click event.

• .dblclick(): Triggered on a double-click event.

• .hover(): Triggered when the mouse enters or leaves an element.

• .focus() and .blur(): Triggered when an element gains or loses focus.

• .keypress(), .keydown(), .keyup(): Triggered when a key is pressed, down, or released.

• .submit(): Triggered when a form is submitted.

• .change(): Triggered when the value of an input element changes.

• .resize(): Triggered when an element or window is resized.