What are the Event Handling in JQuery With Example

Event Handling in JQuery

Events are essential to developing dynamic and interactive web sites in web development. A JavaScript event is any activity it can identify, such as a user pushing a button, a web page loading, a mouse cursor passing over an element, or form data being entered. Event handling determines what to do when certain events occur.

The Role of jQuery in Event Handling

Due to variations in how various web browsers handle these features, processing events with pure JavaScript has historically been difficult and time-consuming. JQuery solves this problem by providing a concise, cross-browser event processing API. By abstracting browser-specific difficulties, jQuery lets developers “write less, do more” by guaranteeing code works across browsers.

JavaScript and HTML are kept entirely apart in non-obtrusive programming, which is encouraged by jQuery. jQuery enables event assignments and the definitions of their accompanying callback functions to be managed entirely within JavaScript, frequently in a single step and location, as opposed to explicitly inserting JavaScript function calls into HTML properties (like onclick).

Key Concepts of Event Handling in jQuery

jQuery’s basic syntax is $(selector).action(). To define or access jQuery, use the $ symbol. To “query” or locate HTML elements, use the (selector) portion. A jQuery action() is applied to the elements when they have been chosen. A basic function for selecting portions of the document is $(). It usually accepts a string parameter that may include any selector expression in CSS. $(document), for example, denotes the full web page.

Ensuring DOM Readiness:

Event handling in jQuery relies on $(document).ready(). Only when the webpage loaded and the Document Object Model is generated does this function execute. Because you cannot utilise or change DOM elements with JavaScript before the page structure is completely exposed, this is crucial.

$(document).ready() is regarded as a more dependable and compatible substitute for the conventional window.because of the varied implementations in different browsers, the onload event handler is frequently seen as unreliable. JQuery offers a shorter version of $(document).ready(): $(function() { /* your code here */ });.

Binding Event Handlers:

Simple ways to add functions also referred to as callbacks or event handlers to certain components that will run in response to a given event are offered by jQuery. This usually refers to the element that caused the event within these functions.

Shorthand Event Methods: jQuery provides shorthand methods like.click() for common events like click. Because they need fewer keystrokes simplify coding. Dblclick, focus, change, keydown, keyup, keypress, mousedown, mouseenter, mouseeleave, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, and unload are more occurrences.

.bind() and .on(): In the past, each matching element’s handler was attached to one or more events using the.bind() method. It is now the standard practice to bind event handlers using the.on() method. By separating names with spaces (e.g., on(‘mouseenter mouseleave’)), it is more flexible, enabling event delegation and binding to many event types at once.

Event Delegation: Event delegation is made possible by.on()’s capacity to take a selection as an additional input. By attaching an event handler to a common ancestor element, jQuery filters events so that the handler is only triggered if the event came from a descendant element that matches the provided selection. This is a very effective strategy. With dynamically added content, this is especially helpful because handlers linked to ancestors will automatically apply to newly added items that match the selector.

“Once Only” Event Listeners: The.one() function ties a handler to an event that will only be run once for every element that matches, after which the binding is cut off automatically.

The Event Object:

jQuery passes a JavaScript event object to the callback function when an event handler is called. Important details concerning the incident are contained in this item. Crucial attributes consist of:

• The trigger (“click” or “mouseover”).
• What the event targeted was this DOM element.
• event.pageX, event.pageY: For mouse events, these are the mouse cursor’s horizontal and vertical coordinates with respect to the page origin.
• event.which: The number of the pressed key for keyboard events.

Event Propagation: Not only does an event that is fired on an element impact that particular element, but it also spreads to its parent elements in the DOM tree. Event propagation is the term for this procedure. Two primary stages of propagation are identified:

Capturing: From the document or most encompassing element, the action passes through the DOM tree to the destination.

Bubbling: The event “bubbles up” the DOM tree from the target element to its parents and then to the document. For the bubbling phase, jQuery mainly registers event handlers to ensure uniform behaviour.

Stopping Propagation and Preventing Default Actions:

Event objects give methods to control event behaviour:

event.stopPropagation(): The event.stopBy halting events from bubbling up, Propagation() keeps parent handlers from being notified.

event.preventDefault(): The browser’s default action for the event is prevented by Event.preventDefault(). One way to stop a link from automatically opening a new page is to use preventDefault().

return false: This handy shortcut for a jQuery event handler immediately invokes event.stopPropagation() and event.preventDefault().

Code Example:

Let’s look at a basic jQuery example to demonstrate these ideas. In addition to changing a paragraph’s text when clicked, we’ll design a button that stops a default link action.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Event Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    body { font-family: Arial; text-align: center; margin-top: 50px; }
    #myButton { padding: 10px 20px; font-size: 16px; }
    #myParagraph { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }
    .highlight { background-color: yellow; font-weight: bold; }
  </style>
</head>
<body>
  <button id="myButton">Click Me</button>
  <p id="myParagraph">This is the original text.</p>
  <a href="https://jquery.com" id="myLink">Visit jQuery.com</a>
  <script>
    $(function() {
      $("#myButton").click(function() {
        $("#myParagraph").text("The text has been changed!").addClass("highlight");
      });
      $("#myLink").click(function(e) {
        e.preventDefault();
        $(this).text("Navigation to jQuery.com was prevented!");
      });
    });
  </script>
</body>
</html>

Output:

Click Me
The text has been changed!

Visit jQuery.com

Explanation of the Code

$(document).ready(function() { … });: Our entire jQuery code is wrapped here. JavaScript runs after the browser loads and parses the HTML DOM. Avoiding script access to uncreated components prevents difficulties.

$(“#myButton”).click(function() { … });:

• $(“#myButton”): Chooses the HTML <button> element associated with the ID “myButton” using an ID selector.
• An event method that connects a function to the click event of the selected button is.click(function() {… });. The anonymous function inside the button will run when it is clicked.
• “The text has been changed!” $(“#myParagraph”).text());: identifies the <p> element by its ID and modifies its content using the.text() method.
• By selecting the same paragraph and applying a CSS class using the.addClass() method, $(“#myParagraph”).addClass(“highlight”);: modifies the paragraph’s appearance dynamically.

$(“#myLink”).click(function(event) { … });:

• Using its ID, $(“#myLink”): Chooses the <a> element.
• function(event): An event parameter is passed to the anonymous function in this case. This event object gives information about what happened.
• This crucial event method stops the link’s default functionality. Clicking on a <a> tag usually opens the URL in its href attribute. To stop this navigation, we call preventDefault().
• $(this); “Navigation to jQuery.com was prevented!” This event handler uses $(this) to represent the HTML element (link) that caused it. It updates link text.
• Function event.stopPropagation: This prevents click events from propagating to parent components. This prevents ancestor components with click handlers from activating when this link is clicked.

This example shows how jQuery streamlines routine event handling chores, enabling developers to quickly produce responsive and engaging web experiences.