JS addEventListener Method


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);