addEventListener() method allow us to bind an event to an Element. The general syntax for doing
this is given below
element.addEventListener(event,function,useCapture)
Here first parameter is and event which we want to add to an element like a click,mouseover etc and second is event handler function which is to be executed when and event occurs or fires and third parameter useCapture is a boolean value which specify that whether the event use bubling or event capture method to occure. This parameter is optional and will be explained little later.
Example: In this example we attach a click event to a button using addEventListener Method. This is a very cool and simple example just only to demonstrate that how addEventListener Method works
<h1>JavaScript addEventListner() method demo</h1>
<button id="btn"> Press Me </button>
<script>
document.getElementById("btn").addEventListener("click",sayHello());
sayHello(){
alert("Hello World");
</script>
}
addEventListener() method attaches an event not only to an HTML Element as well as to other DOM objects like windows etc. This method binds an event to an element withoud overwriting existing event attached to it. It is also possible to add many event handlers to same element. Moreover it is also possible to remove an event using removeAddEventListener() method.
What is Event Bubble and Event Capture in addEventListener() ? Explained
HTML DOM allows two types of event propagation or occuring.i.e.One way is Event Bubbling and other is Event Capture.
This subject could be easily explained by taking the following simple example. Suppose we have p element placed inside a div element. We attach two click events one with p and other with div. Now if a user click on p element then the question is that which click event occurs first that is attached to p or div
In case of bubbling the innermost event occurs first and then the outer event and in case of event capture the outer most event occurs first then propagated to inner event.
With addEventListener() we can specify the the order of the event propagation in DOM using useCapture parameter. This is opational parameter. This takes the boolean value and default value is false meaning that if this parameter is not specified then HTML DOM follows bubble method of event propagation
What is the advantage and difference between addListener method and inline JavaScript Events added to an HTML page ?
In order to understand the difference and advantages of addListener Method consider the following two lines of code ...
|
|
The main difference is that
onclick is just a property, and like all object properties, if you write on more than once, it will be overwritten. With addEventListener()
instead, we can simply bind an event handler to the element, and we can
call it each time we need it without being worried of any overwritten
properties.
In first place I was tempted to keep using
onclick, because it’s shorter and looks simpler… and in fact it is. But I don’t recommend using it anymore. It’s just like using inline JavaScript. Using something like <button onclick="doSomething()"> – that’s inline JavaScript – is highly discouraged nowadays (inline CSS is discouraged too, but that’s another topic).
However, the
addEventListener() function, despite it’s the standard, just doesn’t work in old browsers
(Internet Explorer below version 9), and this is another big
difference. If you need to support these ancient browsers, you should
follow the onclick way. But you could also use jQuery (or one of its alternatives): it basically simplifies your work and reduces the differences between browsers, therefore can save you a lot of time.
