Legacy JS

legacy.js

// THE GOAL
// Write $('ul').on('click', 'a', fn); in JavaScript
// Must support old IE (so no Selectors API (matchesSelector) or anything)
// Can you shorten this?

var addEvent = (function () {
    if (window.addEventListener) {
         return function (el, ev, fn) {
             el.addEventListener(ev, fn, false);
         };
    } else {
     	return function (el, ev, fn) {
             el.attachEvent('on' + ev, function() {
             	return fn.call(el, window.event);
             });
        };
    }
 }());

var uls = document.getElementsByTagName('ul');

for ( var i = 0, len = uls.length; i < len; i++ ) {
	addEvent(uls[i], 'click', function(e) {
                var target = e.target || e.srcElement;
		if ( target && target.nodeName.toLowerCase() === 'a' ) {
			// proceed
		}
	});
}

Or, if we need multiple element event binding...

var addEvent = (function () {
var filter = function(el, type, fn) {
    for ( var i = 0, len = el.length; i < len; i++ ) {
        addEvent(el[i], type, fn);
    }
};
if ( document.addEventListener ) {
    return function (el, type, fn) {
        if ( el && el.nodeName || el === window ) {
            el.addEventListener(type, fn, false);
        } else if (el && el.length) {
            filter(el, type, fn);
        }
    };
}

return function (el, type, fn) {
    if ( el && el.nodeName || el === window ) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
    } else if ( el && el.length ) {
        filter(el, type, fn);
    }
};

})();