EventListener in Jquery:
We use addEventListener() method to attach an event handler to an element in Jquery.With the help of this method we can add as many event handlers as we want to an element without
overwriting existing event handlers.
Syntax:
element.addEventListener(event, function, useCapture);
1. The first parameter defines the event such as "click,mouseover,etc.".
2. The Second parameter defines the function which is to be executed on that particular event defined by the first parameter.
3. The third parameter is an optional parameter that takes either of the two values i.e. true or false, which specifies whether to use event bubbling or event capturing.(We will discuss event bubbling & event capturing later in this blog).
Let us take an example:
<!DOCTYPE html>
<html>
<body>
<p>This is a test application.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hi");
}
</script>
</body>
</html>
In this above example we want to bind a click event on the <p> tag.(i.e. we want that whenever some one clicks on the <p> tag's content a message should be displayed). For which we used addEventListener() method and bind the click event with the id of the <p> tag.
Adding more than one event to an element:-
Example:
document.getElementById("mypara").addEventListener("mouseover", myFunction);
document.getElementById("mypara").addEventListener("click", mySecondFunction);
document.getElementById("mypara").addEventListener("mouseout", myThirdFunction);
Event Bubbling/Event Capturing:-
These are the ways of event propagation i.e they define the element order when an event occurs.
Suppose we have <p> element inside a <div> element & we click on the <p> element then:
In bubbling.... <p> click will be handled first then the <div> click is handled (i.e. first the <p> click event will take place then the <div> click event). Whereas...
In capturing.... <div> click will be handled first then the <p> click will be handled(i.e. first the <div> click event will take place then the <p> click event).
Example:
document.getElementById("myP").addEventListener("click", myFunction, true);
When it is set to true (the third parameter of the addEventListener() method) it means, the event uses the capturing propagation, if set to false the event uses the bubbling propagation.
0 Comment(s)