var parent1 = document.querySelector('.parent1'),

    child1 = document.querySelector('.child1'),

    parent2 = document.querySelector('.parent2'),

    child2 = document.querySelector('.child2'),

    output = document.querySelector('output');

    output2 = document.querySelectorAll('output')[1];

​

// for first parent/child

parent1.addEventListener('click', function () {

  output.innerHTML += '<p>click parent1</p>';

}, false);

​

child1.addEventListener('click', function () {

  output.innerHTML += '<p>click child1</p>';

}, false);

​

// for 2nd parent/child

parent2.addEventListener('click', function () {

  output2.innerHTML += '<p>click parent2</p>';

}, true);

​

child2.addEventListener('click', function () {

  output2.innerHTML += '<p>click child2</p>';

}, false);