Example of work with DOM (events)

test.js

document.querySelector('body').innerHTML = '<div class="red"><div class="blue"><div class="green"></div></div></div><style>.red{background-color: red; width: 200px; height: 200px; padding-top: 50px; padding-left: 50px;} .blue{background-color: blue; width: 100px; height: 100px; padding-top: 50px; padding-left: 50px;} .green{background-color: green; width: 50px; height: 50px;}</style>';
var red = document.querySelector('.red'),
    blue = document.querySelector('.blue'),
    green = document.querySelector('.green');
red.addEventListener('click', function(event) {
    console.log('red', event);
});
blue.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('blue', event);
});
green.addEventListener('click', function(event) {
    console.log('green', event);
});