Box Example

box-example.js

function createBoxes(){
	var html = '';
	var boxesToCreate = 50;
	
	//create the container node
	var container = document.createElement( 'div' );
	container.className = 'container';
	
	//create the boxes and add them to the container
	for( var i = 0; i < boxesToCreate; i++ ){
		html += '<div data-box-number="' + i + '" class="box">Box ' + i + '</div>';
	}
	container.innerHTML = html;
	
	//add the container with the boxes to the document body
	document.body.appendChild( container );
	
	return container;
};
function bindBoxEvents( containerElement ){
	//bind a click function to the boxes found within the containerElement
	//we used jQuery here to simplify the example
	$( containerElement ).find( '.box' ).on( 'click', showBoxNumber );
};
function showBoxNumber( e ){
	//cleanup the event and find the target
	e = e || window.event;
	var target = e.srcElement || e.target;
	
	//get the box number now
	var boxNumber = target.getAttribute( 'data-box-number' );
	
	alert( 'You clicked Box #' + boxNumber );
};

var container = createBoxes();
bindBoxEvents( container );