rambhairao/event-propagation-css.css

## event-propagation-css.css
li{
  list-style-type: none;

  display: inline-block;
}
div{

  width: 100px;
  height: 100px;
}

#one{
  background-color: #b647b7;
}
#one2{
  background-color:#2c8e80;
}
#one3{
  background-color: #47a1b7;
}
#one4{
  background-color: #00ffa2;
}
#one7{
  background-color: #352a7c;
}
#one5{
  background-color: #ffde00;
}
#one6{
  background-color: #4ea8f3;
}
#one8{
  background-color: #a80dd0;
}
#one4{
  background-color: #00ffa2;
}
#one9{
  background-color: green;
}

#wrapper{
  width: 100%
}

## event-propagation.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>event propagation in js </title>
</head>
<body>
  <div  id="wrapper">
  <ul id="listner">
    <li> <div id="one" >   </div> </li>
    <li> <div id="one2">   </div> </li>
    <li> <div id="one3">   </div> </li>

    <li> <div id="one4">   </div> </li>
    <li> <div id="one5">   </div> </li>
    <li> <div id="one6">   </div> </li>

    <li> <div id="one7">   </div> </li>
    <li> <div id="one8">   </div> </li>
    <li> <div id="one9">   </div> </li>


  </ul>
  </div>
</body>
</html>

## event-propagation_js.js
document.getElementById('listner').addEventListener('click', function(e){
  console.log(e.target.id);
  console.log("on all");


}, true);

document.getElementById('listner').addEventListener('click', function(e){
  console.log("click hs on listner");

}, true);

document.getElementById('one3').addEventListener('click', function(e){
  console.log(e.target.id);
  console.log("on 3");

}, true);

document.getElementById('wrapper').addEventListener('click', function(e){
  console.log(e.target.id);
  console.log("on wrapper");


}, true);
	li{
	list-style-type: none;

	display: inline-block;
	}
	div{

	width: 100px;
	height: 100px;
	}

	#one{
	background-color: #b647b7;
	}
	#one2{
	background-color:#2c8e80;
	}
	#one3{
	background-color: #47a1b7;
	}
	#one4{
	background-color: #00ffa2;
	}
	#one7{
	background-color: #352a7c;
	}
	#one5{
	background-color: #ffde00;
	}
	#one6{
	background-color: #4ea8f3;
	}
	#one8{
	background-color: #a80dd0;
	}
	#one4{
	background-color: #00ffa2;
	}
	#one9{
	background-color: green;
	}

	#wrapper{
	width: 100%
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>event propagation in js </title>
	</head>
	<body>
	<div id="wrapper">
	<ul id="listner">
	<li> <div id="one" > </div> </li>
	<li> <div id="one2"> </div> </li>
	<li> <div id="one3"> </div> </li>

	<li> <div id="one4"> </div> </li>
	<li> <div id="one5"> </div> </li>
	<li> <div id="one6"> </div> </li>

	<li> <div id="one7"> </div> </li>
	<li> <div id="one8"> </div> </li>
	<li> <div id="one9"> </div> </li>



	</ul>
	</div>
	</body>
	</html>
	document.getElementById('listner').addEventListener('click', function(e){
	console.log(e.target.id);
	console.log("on all");


	}, true);

	document.getElementById('listner').addEventListener('click', function(e){
	console.log("click hs on listner");

	}, true);

	document.getElementById('one3').addEventListener('click', function(e){
	console.log(e.target.id);
	console.log("on 3");

	}, true);

	document.getElementById('wrapper').addEventListener('click', function(e){
	console.log(e.target.id);
	console.log("on wrapper");


	}, true);