Advertisement
Advertisement
Advertisement
Advertisement
by Jeffrey Way
Difficulty:IntermediateLength:QuickLanguages:
This post is part of a series called Javascript from Null.
In chapter five of this series, we jumped into the muddy world of event listeners. In that episode, we only got our feet wet; however, today, we’ll take things a step further as we implement a far more efficient solution. Along the way, we’ll learn a plethora of new techniques.
Full Screencast
Our Final Code
var addEvent = (function( window, document ) { if ( document.addEventListener ) { return function( elem, type, cb ) { if ( (elem && !elem.length) || elem === window ) { elem.addEventListener(type, cb, false ); } else if ( elem && elem.length ) { var len = elem.length; for ( var i = 0; i < len; i++ ) { addEvent( elem[i], type, cb ); } } }; } else if ( document.attachEvent ) { return function ( elem, type, cb ) { if ( (elem && !elem.length) || elem === window ) { elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } ); } else if ( elem.length ) { var len = elem.length; for ( var i = 0; i < len; i++ ) { addEvent( elem[i], type, cb ); } } }; } })( this, document ); // Example Usage var lis = document.getElementsByTagName('li'); addEvent( window, 'click', function() { this.style.border = '1px solid red'; });
Please note that this code is slightly revised, based upon some excellent feedback in the comments section.
Advertisement
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyAdvertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by![Native Native]()

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.