In this article we will show you the solution of jQuery on multiple events, when an event occurs on the chosen components, jQuery's method.on() allows you to react.
An event binding is what this is known as. Although there are other methods available for event binding besides.on(). Now move to the concept of Jquery on multiple events.
Step By Step Guide On jQuery On Multiple Events :-
For the chosen items and their descendant elements, the on() function adds one or much more event handlers.
The bind(), live(), and delegate() methods have been replaced with the on() method since like jQuery version 1.7.
Because it streamlines the jQuery code base, this way makes the API much more consistent, and we advise you to utilise it.
Both the current and the FUTURE elements will operate with event handlers applied using it as on() method.
Utilize the off() function to eliminate event handlers. Use the one() function to add an event which only executes once before removing itself.
Syntax :-
$(selector).on(event,childSelector,data,function,map)
- Event: Considered necessary. Namespaces or events are specified to be attached to the chosen items. Spaces are used to separate different event values. Must be a legitimate event.
- childSelector : Optional. This event handler should be only attached to the given child elements, not the selector itself, as was the case with the deprecated delegate() technique.
- Data: Optional. defines any additional information to be sent to the function.
- Function: Needed. specifies the process to be executed when the event happens.
- Map : defines an event map (event:function, event:function,...) that includes one or more events to attach to the chosen elements and functions to execute when the events happen.
The .on() method provides several useful features:
Many events, but only one event handler :-
Consider the scenario where you want the same event to be triggered each time the mouse enters or exits the selected components.
Use of "mouseenter mouseleave" is the recommended procedure for this.
Many events and handlers:
Alternatively, let's say you like to have distinct event handlers when the mouse touches and exits an element.
This is a more typical example than the preceding one.
Use this, for instance, to make a tooltip visible and invisible as the cursor hovers over it.A multi-event object with handlers is accepted by the.on() method.
The event object :-
It can be difficult to manage events. For greater control, it's frequently beneficial to leverage the extra data present in the event object supplied to the event handler.
For an overview of the event object on a page, you can use this code to check the browser console when you click on a div.
When an element isn't yet present, you can still bind events to it:
Event delegation refers to this process.
Connecting Events to Run Only Once :-
Sometimes you just need a certain handler to run once; thereafter, you might want it to stop running altogether or you might want to have an another handler to run.
The.one() method from jQuery is available for this use.
When you need to perform a complex set the first instance an element gets clicked but not on future clicks, the.one() method comes in particularly handy.
The fact that.one() needs to accept the same arguments as.on() means that it enables supplying custom data, delegating events to one or more handlers, and supporting multiple events.
Disconnecting Events :-
Although the.on() method of jQuery is where all the action happens, its opposite is just as crucial if you wish to be an ethical developer.
When you are finished with the event binding, call.off() to remove it. Using the.off() function carefully is a best practise to make sure you only always had the event bindings that you'll need, when you need them.
Complex user interfaces containing lots of event bindings might slow down browser performance.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Welcome to Talkerscode</p>
</body>
</html>
- HTML & HEAD Tags are the first tags in our code.
- Next, we use script to import the jquery library.
- Following that, we launch our script.
- After that, we run our jQuery code using the ready() method.
- Then, for the <P> tag, we use the.on() method.
- Next, alert is used.
- After that, we end our script.
- Following that, we begin our body.
- Using the <P> Tag, we build the paragraph in the body.
- BODY & HTML Tags round out our program's final section.
Conclusion :-
As a result, we have successfully acquired the knowledge of jQuery on various events. jQuery's method.on() lets you to respond when an event happens on the selected components, as we also learned.
This is known as an event binding. Despite the fact that there are alternatives to.on for event binding ().
I hope this article on jQuery on multiple events helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
