Edit in JSFiddle

(function() {
    var a = document.getElementById('A');
    var b = document.getElementById('B');
    var log = document.getElementById('log');

    var logEvent = function(ev) {
        var p = document.createElement('p');
        p.innerHTML = ev.currentTarget.id + ' received ' + ev.type + ' on ' + ev.target.id;
        p.innerHTML += ' during phase #' + ev.eventPhase;
        log.appendChild(p);

        // apply to style after 1 sec
        window.setTimeout(function() {
            p.classList.add('ok');
        }, 1000);

        // scroll to see the last event
        var scrollY = log.scrollHeight - log.clientHeight;
        log.scrollTop = scrollY;
    }

    var eventTypes = ['mousedown', 'mouseenter', 'mouseleave', 'mouseup', 'mouseover', 'mouseout'];
    for (var i = 0; i < eventTypes.length; i++) {
        a.addEventListener(eventTypes[i], logEvent, false);
        b.addEventListener(eventTypes[i], logEvent, false);
    }
})();

<div id="A">A
  <div id="B">B</div>
</div>
<div id="log"></div>

body {
  font-family: Arial, sans-serif;
}

#A {
  background: #CCC;
  margin: 50px;
  padding: 50px 50px 0 50px;
}

#B {
  background: #EEE;
  height: 50px;
}

p {
  background: #FFA;
  margin: 2px 5px;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

p.ok {
  background: #FFF;
}

#log {
  border: 1px solid #AAA;
  border-radius: 5px;
  height: 200px;
  margin: 5px;
  overflow: auto;
}