/**

 * Initialize an event counter on the specified property of the DOM prototype.

 * 

 * @param {object} domPrototype the prototype of DOM

 * @param {string} eventName the property name of DOM

 */

function initDOMEventCounter(domPrototype, eventName) {

  var descriptor = Object.getOwnPropertyDescriptor(domPrototype, eventName);

  var setter;

  var eventCallback;

  if (!Boolean(descriptor) || !descriptor.configurable) {

    // do nothing with the non-exist property

    // or skips the non-configurable property

    return;

  }

  setter = descriptor && descriptor.set;

  Object.defineProperty(domPrototype, eventName, {

    get: function() {

      // returns the decorated callback

      return eventCallback;

    },

    set: function(callback) {        

      if (!callback) {

        eventCallback = undefined;

        return;

      }

      // decorates `callback` with an event counter

      eventCallback = function() {

        console.log('#' + this.id + ' counted: ' + eventName);

        callback.apply(this, arguments);

      };

      if (setter) {

        // sets the decorated callback as the event callback

        setter.call(this, eventCallback);

      }

    }

  });

}

​

function initDomEventCounters(dom) {

  var prototype = dom.prototype;

  var eventNames = ['click', 'keydown', 'change', 'mouseenter', /* etc. */];

  eventNames.forEach(function(name) {

    initDOMEventCounter(prototype, 'on' + name);

  });

}

​

​

// demo ---

​

initDomEventCounters(HTMLElement);

​

var doSomething = function(event) {

  console.log(event.target.id + ' does something as ' + event.type);

};

var elDiv = document.querySelector('#div');

var elInput = document.querySelector('#input');

​

elDiv.onclick = doSomething;

elDiv.onmouseenter = doSomething;

elInput.onchange = doSomething;

elInput.onkeydown = doSomething;