It is used to listen to the specified element on the HTML document and run a method when the desired event occurs. In short, it is used to assign events to DOM objects. In this article, I will explain how to use addEventListener and its optional bubbling feature. When using addEventListener, we usually set the last parameter to false. We will also examine what happens if it is true.

Use of:

element.addEventListener(event,function,bubble);

event: activity belonging to the tag to be listened to.

ex: click, mouseover, keypress, cut, scroll, dragenter etc. Click to see the full event list. Function: The name of the method or anonymous function that will be run when the listened event occurs. Bubbling: If an event is defined in each of the nested tags, whether it will run the correct events from start to finish (returns true/false).

Simple usage:

var object= document.getElementById("test1");
object.addEventListener("click",function(e){ alert("hello"); },false);

When the test1 object is clicked, an anonymous function is triggered. Now let's examine the concept of bubbling in the picture below. They are named as orange (box 1), yellow (box 2) and red (box 3). These three labels are in each other's order. box1 > box2 > They stand inside each other in the shape of a box3. A click event and anonymous identification are made for each tag. When the last parameter, bubbling, is marked false in the first example, the functions will be run on the affected labels, respectively, from inside to outside.

1.Status: bubbling false and box3(red ) object is clicked, first, the Kutu3 > Kutu2 > Kutu1 methods will be run respectively.

var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
var box3= document.getElementById("box3");
box1.addEventListener("click",function(e){ alert("box 1 worked"); },false );
box2.addEventListener("click",function(e){ alert("box 2 worked"); },false );
box3.addEventListener("click",function(e){ alert("box 3 worked"); },false );

2.Status: bubbling If true is written, this time the affected tags methods are from inside to outside  It will not execute dotrue, it will run from outside to dotrue. Again, when we change the bubble in our example to true and click on the box3 (red) object, box1 > box2 >box3.

var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
var box3= document.getElementById("box3");
box1.addEventListener("click",function(e){ alert("box 1 worked"); },true);
box2.addEventListener("click",function(e){ alert("box 2 worked"); },true );
box3.addEventListener("click",function(e){ alert("box 3 worked"); },true );

In this situation, we changed the bubbling parameter with addEventListener to see which tags were affected and how. If a tag's parents have no methods, bubbling will not matter. However, if there are events in the parents of the tag to which we will assign events, whether the bubbling value is true/false will be important. stopPropagation: So, what should I do if I don't want my parents to check the events when I click on the box3 (red) label? The Event.stopPropagation method works for us. By setting the Bubbling value to false, we enable event control to start from the tag we click and write the Event.stopPropagation method to the running method. Example usage: In the example, when we click on the box3 (red) label, only box3 will run and e.stopPropagation(); We will prevent downward bubbles with this value.

var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
var box3= document.getElementById("box3");
box1.addEventListener("click",function(e){
alert("box 1 worked");
},false);
box2.addEventListener("click",function(e){
alert("box 2 worked");
},false);
box3.addEventListener("click",function(e){
e.stopPropagation() ;
alert("box 3 worked");
},false);