Event Handling Using JQuery

Lecture 211:- Event Handling Using JQuery

Event handling using jQuery is similar to handling events using vanilla JavaScript. The basic syntax to attach an event handler to an element using jQuery is as follows:

csharpCopy code

$(selector).on(event, handler)

Here, the $(selector) is used to select the element(s) to which the event handler needs to be attached. The on() method is used to attach an event handler function to the selected element(s) for the specified event.

For example, the following code attaches a click event handler to a button with the ID myButton:

javascriptCopy code

$("#myButton").on("click", function() {  // code to handle the click event });

This code selects the button element with the ID myButton and attaches a click event handler function to it. The function is executed when the button is clicked.

You can also use the click() method as a shorthand for attaching a click event handler. The click() method is equivalent to calling on("click", handler).

For example, the following code attaches a click event handler to a button with the ID myButton using the click() method:

javascriptCopy code

$("#myButton").click(function() {  // code to handle the click event });

This code is equivalent to the previous example.

In addition to the on() and click() methods, jQuery provides a number of other methods for attaching event handlers to elements. Some of these methods include hover(), blur(), focus(), keypress(), keydown(), and keyup(). Each of these methods is used to attach a specific type of event handler to an element.