console
<!DOCTYPE HTML>
<html>
<head>
<style>
#d {
display: inline-block;
width: 100%;
background-color:orange;
}
#d1,#d2 {
height: 50px;
margin-top: 10px;
margin-bottom:10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d">
<div id="d1"></div>
<div id="d2"></div>
</div>
<script>
var d = document.getElementById("d");
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
d.addEventListener('click',function(e){
console.log("parent");
d1.style.backgroundColor = "red";
})
d1.addEventListener('click',function(e){
console.log("children1");
d1.style.backgroundColor = "red";
event.stopPropagation();
})
d2.addEventListener('click',function(e){
console.log("children2");
d1.style.backgroundColor = "red";
event.stopPropagation();
})
</script>
</body>
</html>