Event Listener

by ramsunvtech

HTML

<ul id="people">
  <li>
  	<a href="http://microsoft.com">microsoft.com</a>
  </li>
  <li>
  	<a href="http://facebook.com">facebook.com</a>
  </li>
  <li>
  	<a href="http://apple.com">apple.com</a>
  </li>
  <li>
  	<a href="http://mastercard.com">mastercard.com</a>
  </li>
</ul>

JavaScript

var people = [
	  { firstname:"Micro",  lastname:"Soft", site:"http://microsoft.com" },
	  { firstname:"Face",   lastname:"Book", site:"http://facebook.com" },
	  { firstname:"App",    lastname:"Le",   site:"http://apple.com" },
	  { firstname:"Master", lastname:"Card", site:"http://mastercard.com" }
	];

	var anchorList = document.querySelectorAll('#people li a');

	// Check if iterable.
	if( anchorList.length > 0 ) {

		// Iterate each node from NodeList.
		for( var i = 0; i < anchorList.length; i++ ) {
			var a = anchorList[i];
			a.addEventListener("click", function (e) {
				e.preventDefault();
				var message = "",
					result,
					href = this.getAttribute('href');

				result = people.filter( function (v) {
					return v.site == href; // Filter out the appropriate one
				})[0];

				alert( message.concat("Created By ", result.firstname, " ", result.lastname) );
			});
		}

	}