JavaScript addEventListener

by hsablonniere

HTML

<input type="text" id="A" value="The world">
<input type="text" id="B" value="is not enough...">
<div id="log"></div>

CSS

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

#A, #B {
  border: 1px solid #AAA;
  font-size: 18px;
  margin: 5px;
  padding: 0;
}

#A {
  background: #DDD;
}

#B {
  background: #CCC;
}

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;
}

JavaScript

(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.type + ' on ' + ev.target.id;
        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 = ['blur', 'focus', 'focusin', 'focusout', 'DOMFocusIn', 'DOMFocusOut'];
    for (var i = 0; i < eventTypes.length; i++) {
        a.addEventListener(eventTypes[i], logEvent, false);
        b.addEventListener(eventTypes[i], logEvent, false);
    }
})();