Advertisement
JavaScript & AJAX

JavaScript from Null: Cross-Browser Event Binding

by

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 &#038;&#038; !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.

Related Posts
  • Code
    Web Development
    Creating an RSS Feed Reader With the MEAN Stack Mean wide retina preview
    In the last tutorial we installed the MEAN stack. Now, let's do some actual coding and build an RSS Feed Reader.Read More…
  • Web Design
    Typography
    Getting the Hang of Hanging PunctuationGrand motel text effect
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Game Development
    Games
    Game Input SimplifiedPreview
    Cross-platform games all have one thing in common: they all need to deal with a multitude of game input devices (controllers), and dealing with those input devices can become a daunting task. This tutorial demonstrates one way to handle multiple input devices through the use of a simple, unified API.Read More…
  • Web Design
    Complete Websites
    Finishing the Responsive Timeline Portfolio PagePortfolio2 thumb
    It's time to finish off our responsive timeline portfolio layout. In this tutorial we'll add some flair with CSS3 animations and jQuery.Read More…
  • Code
    JavaScript & AJAX
    Connect 4 With Socket.ioSocket io wide retina preview
    Today we'll see how we can use Node.js and Socket.io to create a multiplayer Connect 4 style game.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 3Indexeddb retina preview
    Welcome to the final part of my IndexedDB series. When I began this series my intent was to explain a technology that is not always the most... friendly one to work with. In fact, when I first tried working with IndexedDB, last year, my initial reaction was somewhat negative ("Somewhat negative" much like the Universe is "somewhat old."). It's been a long journey, but I finally feel somewhat comfortable working with IndexedDB and I respect what it allows. It is still a technology that can't be used everywhere (it sadly missed being added to iOS7), but I truly believe it is a technology folks can learn and make use of today. In this final article, we're going to demonstrate some additional concepts that build upon the "full" demo we built in the last article. To be clear, you must be caught up on the series or this entry will be difficult to follow, so you may also want to check out part one.Read More…