JavaScript from Null: Cross-Browser Event Binding

Friday, 27 August 2010 12:29

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.

As with every JavaScript from Null screencast, it’s not essential that you view the previous entries in the series before watching.

Catch Up

• Chapter 1: Hello World
• Chapter 2: Data Types
• Chapter 3: Conditional Statements
• Chapter 4: Arrays, Functions, and your First Animation
• Chapter 5: Events
• Chapter 6: Cross-Browser Event Binding

Chapter 6: Cross-Browser Event Binding

Our Final Code

var addEvent = (function( window, document ) {
	if ( document.addEventListener ) {
		return function( elem, type, cb ) {
			if ( elem && !elem.length ) {
				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.attachEvent( 'on' + type, function() { return cb.call(elem) } );
			}
			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( lis, 'click', function() {
	this.style.border = '1px solid red';

});