JS addEventListener Method


JS  addEventListener Method

The addEventListener() method is used to attach an event handler to a particular element. It does not override the existing event handlers. Events are said to be an essential part of the JavaScript. A web page responds according to the event that occurred. Events can be user-generated or generated by API's. An event listener is a JavaScript's procedure that waits for the occurrence of an event.

The addEventListener() method is an inbuilt function of . We can add multiple event handlers to a particular element without overwriting the existing event handlers.

Syntax:

element.addEventListener(event, function, useCapture);

Although it has three parameters, the parameters event and function are widely used. The third parameter is optional to define. The values of this function are defined as follows.

Parameter Values

event: It is a required parameter. It can be defined as a string that specifies the event's name.

function: It is also a required parameter. It is a JavaScript function which responds to the event occur.

useCapture: It is an optional parameter. It is a Boolean type value that specifies whether the event is executed in the bubbling or capturing phase. Its possible values are true and false. When it is set to true, the event handler executes in the capturing phase. When it is set to false, the handler executes in the bubbling phase. Its default value is false.

html file for add event listener and remove event listener

<!DOCTYPE html>
<html>
	<head>
		<title>Basic Layout</title>
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div id="wrapper">
			<div id="header" class="abc">
			   <h1>Yahoo Baba</h1>
			</div>
			<div id="menu">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About Us</a></li>
					<li><a href="">Gallery</a></li>
					<li><a href="">Contact Us</a></li>
				</ul>
			</div>
			<div id="content">
				<h2>Sub Heading</h2>
        <img src="images/flower.jpg" width="200px" class="content-image" alt="">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veniam eius architecto ullam cupiditate quam aspernatur quis facilis tempora vel! Aspernatur, consequatur, laborum, explicabo consequuntur minima beatae perferendis impedit accusantium ex animi odit quisquam sint pariatur minus amet ullam reprehenderit rerum inventore sed officiis voluptas? Dolore, perferendis, minus eum debitis vero ipsam tempora voluptate nam ut autem itaque provident consequatur nobis quia libero! Magni, molestiae, laborum architecto natus inventore facere quis pariatur quia quos quasi quo dicta dolores. Deleniti, facere, fugit sed minus ducimus ut modi voluptatum eaque praesentium saepe aperiam nam quidem laboriosam assumenda voluptate vitae inventore et quibusdam!</p>

            <ul class="list">
               <li>Lorem ipsum dolor sit amet. </li>
               <li>Modi nihil in animi necessitatibus.</li>
               <li>Consectetur adipisicing elit.</li>
               <li>Lorem ipsum dolor sit amet.</li>
               <li>Modi nihil in animi dolore natus.</li>
            </ul>
						<p class="list">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, quam.</p>
         </div>

			<div id="sidebar">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About Us</a></li>
					<li><a href="">Gallery</a></li>
					<li><a href="">Contact Us</a></li>
				</ul>
			</div>
			<div id="footer">
				yahoobaba@copyright 2018.
			</div>
		</div>
		<script src="js/dom-main.js"></script>
	</body>
</html>


main.css for add event listener and remove event listener 

@import "color.css";

*{
  box-sizing: border-box;
}
body{
  font: 18px/24px arial;
}
#wrapper{
  border:1px solid black;
  width: 1000px;
  background: white;
  margin: 0 auto;
}

#top-bar{
  background: MEDIUMPURPLE;
}
#top-bar ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#top-bar ul li{
  display: inline-block;
  margin: 5px;
}
#top-bar a{
  color: #fff;
  font-size: 20px;
}
#top-bar a:hover{
  color: crimson;
}
#header{
  min-height: 100px;
  font-family: arial;
  border-bottom: 1px solid black;
}

#header h1{
  padding:30px 0 0 20px;
  margin: 0;
}
#menu{
      border-bottom: 1px solid black;
}
#menu ul{
  margin: 0;
  padding: 0;
}
#menu li{
  display:inline-block;
}
#menu li a{
  display:block;
  padding: 10px 13px;
  text-decoration:none;

}
#menu li a:hover{

}
#content{
  width:795px;
  min-height:500px;
  padding: 15px;
  float:left;
  box-sizing:border-box;
  position:relative;
}
#content h2{
  font-family: arial;
}
.content-image{
  float:left;margin:0 15px 10px 0;
}
#sidebar{
  width:200px;
  min-height:500px;
  float:right;
  border-left: 1px solid black;
}
#sidebar a{
  text-decoration:none;
  color:black;
}
#footer{
  padding: 5px 10px;
  text-align:right;
  font-size: 14px;
  clear:both;
  border-top: 1px solid black;
}
@import "mediatest.css" screen and (max-width:1020px);

@media screen and (max-width:810px){
  #wrapper{
    width:500px;
  }
  #content{
      width:65%;
  }
  #sidebar{
    width:34%
  }
}
@media screen and (max-width:510px){
  #wrapper{
    width:auto;
  }

  #content{
      width:100%;
    float:none;
  }
  #sidebar{
    width:100%;
    float:none;
  }
  #header h1{
  padding:30px 0 0 0;
  text-align:center;
}
}


dom-main.js for add event listner and remove event listener 

// onclick event
//document.getElementById("header").onclick = abc;

// onmouseenter event
//document.getElementById("header").onmouseenter = abc;

// with addEventListener

/* document.getElementById("header").addEventListener("mouseenter",abc);
   document.getElementById("header").addEventListener("click", function(){
       document.getElementById("header").style.border = "10px solid red"; 
   }); */

/* document.getElementById("header").addEventListener("click", abc);
   document.getElementById("header").addEventListener("click", function() {
      this.style.border = "10px solid red";
   });  */

// with removeEventListener

//document.getElementById("header").removeEventListener('mouseleave',abc);

//document.getElementById("header").addEventListener("click",xyz);

function abc(){
    document.getElementById("header").style.background = "green";
}

function xyz() {
    document.getElementById("header").removeEventListener('mouseleave',abc);
}

/* ====================================================== */


html for usecapture 

<!DOCTYPE html>
<html>
	<head>
		<title>Basic Layout</title>
		<style>
			#outer{
				width: 500px;
				height: 500px;
				margin: 0 auto;
				background: LIGHTSALMON;
			}
			#inner{
				width: 300px;
				height: 300px;
				margin: 100px auto 0;
				background: MEDIUMORCHID;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<h2>Outer</h2>
      <div id="inner">
				<h2>Inner</h2>
      </div>
    </div>
		<script src="js/usecapture.js"></script>
	</body>
</html>


usecapture.js 

document.querySelector("#inner").addEventListener('click',function(){
  alert('Inner Div');
},false);

document.querySelector("#outer").addEventListener('click',function(){
  alert('Outer Div');
},false);

Sub Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veniam eius architecto ullam cupiditate quam aspernatur quis facilis tempora vel! Aspernatur, consequatur, laborum, explicabo consequuntur minima beatae perferendis impedit accusantium ex animi odit quisquam sint pariatur minus amet ullam reprehenderit rerum inventore sed officiis voluptas? Dolore, perferendis, minus eum debitis vero ipsam tempora voluptate nam ut autem itaque provident consequatur nobis quia libero! Magni, molestiae, laborum architecto natus inventore facere quis pariatur quia quos quasi quo dicta dolores. Deleniti, facere, fugit sed minus ducimus ut modi voluptatum eaque praesentium saepe aperiam nam quidem laboriosam assumenda voluptate vitae inventore et quibusdam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, quam.