HTML has a separate element for image display. This will display the image in a specific region of the page. If we want to add multiple pictures and view it one at a time, then HTML does not have any such tag. We need to build our own design for that. This is a JavaScript code which will facilitate a new design to display images in a web page.

We have navigation buttons namely back and next to view the various pictures and an exit button to exit this window and view the page.Let us first see how we need to use this java script functionality in the web browser.

<div id="imageViewer"></div>
<a href="#" onclick="showImage('Gallery/Mangalore',101)">Mangalore</a>
<br/>
<a href="#" onclick="showImage('Gallery/Sceneries',101)">Sceneries</a>

First step is that we need to create is a div element. This element must be named as imageViewer. Note that no other name shall be used here, as our script can identify only this name. To specify various links to be used, we can add anchor elements which would invoke the showImage script functions. Two parameters, namely the image folder path and the first image name must be passed. Note that the name of the image can be only numbers between 101 and 999. And the extension of the file must be JPG in caps. For example 104.JPG.

Once this is done, we are done for making our viewer. The photo viewer code looks as below.

<script type="text/javascript">
imageName=0;
folderName='empty';
arrows=true;

function showImage(folder,file) {
	imageName=file;
	folderName=folder;
	displayDivision();
	displayImage();
}

function changeImageNext() {
	imageName++;
	displayImage();
}

function changeImageBack() {
	imageName--;
	displayImage();
}

function displayDivision() {

	if(arrows) {
		arrows=false;

		//create a outer image division and set its style properties
		outerImageDiv = document.createElement('DIV');
		outerImageDiv.id='outerImageDiv';
		outerImageDiv.style.position='fixed';
		outerImageDiv.style.width='100%';
		outerImageDiv.style.height='100%';
		document.getElementById("imageViewer").appendChild(outerImageDiv);

		//create a table element and set its style properties
		table = document.createElement('table'); //table tab
		table.id='imageTable';
		table.align='center';
		table.frame='box';
		table.style.backgroundColor='#F0F0F0';

		//create a table body element
		tbody=document.createElement('tbody'); //tbody  tbo

		//create the first row of the table.
		firstRow=document.createElement('tr');  //row

		//create the first cell of first row and align it
		firstCellRow1=document.createElement('td');  // cell
		firstCellRow1.align='left';
		//populate the elements of the firstCellRow1
		backSpan = document.createElement("span");
		backSpan.id='backSpan';
		backSpan.style.border='1px solid #C8C8C8';
		backSpan.onclick=function() {changeImageBack();};
		backSpan.appendChild(document.createTextNode(' BACK '));
		firstCellRow1.appendChild(backSpan);
		firstRow.appendChild(firstCellRow1);

		//create the second cell of first row and align it
		secondCellRow1=document.createElement('td'); //cell
		secondCellRow1.align='center';
		//populate the elements of the secondCellRow1
		exitSpan = document.createElement("span");
		exitSpan.id='exitSpan';
		exitSpan.style.border='1px solid #C8C8C8';
		exitSpan.onclick=function() {removeDivision();};
		exitSpan.appendChild(document.createTextNode(' EXIT '));
		secondCellRow1.appendChild(exitSpan);
		firstRow.appendChild(secondCellRow1);

		//create the third cell of first row and align it
		thirdCellRow1=document.createElement('td');
		thirdCellRow1.align='right';
		//populate the elements of the thirdCellRow1
		nextSpan = document.createElement("span");
		nextSpan.id='nextSpan';
		nextSpan.style.border='1px solid #C8C8C8';
		nextSpan.onclick=function() {changeImageNext();};
		nextSpan.appendChild(document.createTextNode(' NEXT '));
		thirdCellRow1.appendChild(nextSpan);
		firstRow.appendChild(thirdCellRow1);

		//append the first row in the table body
		tbody.appendChild(firstRow);

		//create the second row of the table.
		secondRow=document.createElement('tr');

		//create the first cell of first row, align it and span
		firstCellRow2=document.createElement('td');
		firstCellRow2.align="center";
		firstCellRow2.colSpan='3';

		//populate the elements of the first cell in row 2

		//create and set style for the image division
		imageDiv = document.createElement('DIV');
		imageDiv.id='imageDiv';
		imageDiv.style.backgroundColor='#F0F0F0';
		imageDiv.style.width ='700px';
		imageDiv.style.height ='500px';

		//create and append an image element to the image division
		image = document.createElement("IMG");
		image.id='myImages';
		imageDiv.appendChild(image);

		firstCellRow2.appendChild(imageDiv);
		secondRow.appendChild(firstCellRow2);

		//append the second row in the table body
		tbody.appendChild(secondRow);

		//append the table body in the table
		table.appendChild(tbody);

		//append the table to the oter image division
		document.getElementById('outerImageDiv').appendChild(document.createElement('br'));
		document.getElementById('outerImageDiv').appendChild(document.createElement('br'));
		document.getElementById('outerImageDiv').appendChild(table);
	}

	document.getElementById('outerImageDiv').style.visibility='visible';
}

function displayImage() {
	//create a new image element and set the style for it
	newImage = document.createElement("IMG");
	newImage.src =folderName+"/"+imageName+".JPG";
	newImage.id='myImages';
	newImage.style.width = '700px';
	newImage.style.height ='500px';
	newImage.onerror=function() {noImagesToDisplay();};

	//replace the old image with the new image.
	oldImage = document.getElementById('myImages');
	document.getElementById('imageDiv').replaceChild(newImage, oldImage);
}

function removeDivision() {
	document.getElementById('outerImageDiv').style.visibility='hidden';
	alert('Thanks for viewing');
}

function noImagesToDisplay() {
	document.getElementById('outerImageDiv').style.visibility='hidden';
	alert('no images to display');
}
</script>

Some of the operations that this script supports are next navigation, which takes to the next picture in the folder. back navigation which takes to the previous photo in the folder. The exit will exit from the viewer into the html page. On exit an alert message specifying “thanks for viewing” shall be shown to the user. If there are no more pictures, then “no images to display” alert message shall be displayed to the user.

We are all set. Now try to open the web page in your browser and click on the links. You shall get an amazing new window open in which your image will be displayed. Moreover we also have some navigation features which make our photo viewing experience great.

A good looking site is always more preferable than a bland looking site with a boring layout. To jazz up any site, a developer uses JavaScript. It is a popular programming language that used in creating a website with interactive content & elements. The script is browser based and runs independently from page to page. Integrating java codes into a site is easy to create stunning looking websites. Here, you can find 10 scripts that are highly recommended for any website developer or designers.

1. No-Right Click Java Script

Right clicking is second nature to most web users. To avoid them from right clicking on your site, this javascript code can be used. It is mostly to avoid duplication of the information that is used on the site. Those who view the site, due to this code won’t be able to carry out even the normal functions like ‘copy & paste’, thus avoiding any possible data theft.

2. Counters

Google analytics is the best source to keep a track of visitors visiting the site. But, every time one wants to view the stats for their sites, they are required to log into their account, which is quite tedious. To make it easier in viewing the number of visitors a site can be installed with a ‘counter’ javascript. Having this javascript installed can enable the site to display the count for visitors frequenting the website. It is mostly useful for making constructive changes to render the site more traffic friendly.

3. World Time

Internet isn’t restricted to any particular time zone and that any website is accessible from anywhere in the world, it’s a good idea to have a world time clock displayed on the site. It is mostly to aid the visitors, and does little to attract traffic. This javascript is purely a visual element.

4. Animations

Those websites with fun animations are really great to look. Some sites are solely capable of attracting traffic on the basis of their use of interesting visual elements. So with the use of javascript to create fun & interesting apps or graphic for the site will surely boost the number of visitors on the site. What kind of animation to be used, solely depends on the developer and his preference.

5. Image Shuffle

Site that has lots and lots of images, it can get pretty confusing for the user to go through each them, and find the appropriate one. Using a script to constantly display a shuffling image is much better than the traditional thumbnail view and facilitates the use to use the site in much better way. The shuffling images also add an interesting effect to the entire layout of the site. This javascript is useful and also is very much helpful in increasing the ‘visually appealing’ quotient of a site.

6. Special Navigation

There is nothing more appealing on a site than a dedicated and easy to use navigation list or button. These are mostly drop down list, which contains categories or dates that can be used for browsing the content of the website. It is easy to install using javascript coding, and certain elements can be tweaked to render the navigation button/menu with some extra useful capabilities.

7. Colorful Scroll Bars

Making changes to color is one of the most common used in java scripting. It is done to add a personal touch to the entire layout using the color of choice. On most sites the scroll bar is usually grey. But, it can be changed to whatever color the user wishes to have, using java script. It adds a certain visual touch that makes the site appear attractive.

8. Bookmarks

Adding a site to your bookmark list is not a new thing. To extent the capabilities, one can integrate a better bookmarking tool, which can be used by the users who view the site. It will help them remember the page, without doing much search for the site the next time they want to visit the site.

9. Music Players

Create a versatile music player with the use of java script coding, and integrate it into the site so that people who like to listen to music, while browsing can find it useful. Any media player is interesting to look at and adding a media player to the site will jazz up the attractive factor that much more.

10. Password Protection

Password protecting a page isn’t recommended for most. But, for those few who do want to make their pages visible to only few, they can password protect it using a java code. With such pages, a user visiting the site won’t be able to view it, unless the person retains a proper password. Password protecting a page is huge turn off and should be used only when absolutely sure.

var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e) {
		alert("myElementId was clicked");
	};
	YAHOO.util.Event.addListener(myElement, 'click', fnCallback);

var fnCallback = function(e) {
		alert("myElementId was clicked");
	};
	YAHOO.util.Event.addListener('myElementId','click',fnCallback)

var ids = ["myElementId1", "myElementId2", "myElementId3"];
	var fnCallback = function(e) {
		var targ = YAHOO.util.Event.getTarget(e);
		alert(targ.id + " was clicked");
	};
	YAHOO.util.Event.addListener(ids, 'click', fnCallback);

var myElem = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e, obj) {
		alert(obj);
	};
	var obj = "I was passed through.";
	YAHOO.util.Event.addListener(myElem,'click',fnCallback,obj);

var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e) {
		alert('My execution context was changed.');
	};
	var ctx = {
		/* some object to be the execution context of callback */
	};
	YAHOO.util.Event.addListener(
		myElement, 'click', fnCallback, ctx, true);

The addListener function wraps the native event handling functions, normalizing the crossbrowser differences. When attaching events, YUI calls the correct browser specifi c function, or defaults to legacy event handlers. Before executing the callback function, the Event component must (in some browsers) fi nd the event object and adjust the execution context of the callback function. The callback function is normalized by wrapping it in a closure function that executes when the browser event fi res, thereby allowing YUI to correct the event, before actually executing the callback function.

In legacy browsers, which can only have one callback function per event type, YUI attaches a callback function that iterates through the listeners attached by the addListener function.

There’s more…

The addListener function returns true if the event listener is attached successfully and false otherwise.

If the element to listen on is not available when the addListener function is called, the function will poll the DOM and wait to attach the listener when the element becomes available.

Additionally, the Event component also keeps a list of all events that it has attached. This list is maintained to simplify removing events listeners, and so that all event listeners can be removed when the end-user leaves the page.

Find all events attached to an element:

var listeners = YAHOO.util.Event.getListeners('myElementId');
	for (var i=0,j=listeners.length; i<j; i+=1) {
		var listener = listeners[i];
		alert(listener.type); // event type
		alert(listener.fn); // callback function
		alert(listener.obj); // second argument of callback
		alert(listener.adjust); // execution context
	}

Find all events of a certain type attached to an element:

// only click listeners
	var listeners =
		YAHOO.util.Event.getListeners('myElementId', 'click');

		The garbage collector in JavaScript does not always do a good job cleaning up
		event handlers. When removing nodes from the DOM, remember to remove
		events you may have added as well.

The garbage collector in JavaScript does not always do a good job cleaning up event handlers. When removing nodes from the DOM, remember to remove events you may have added as well.

More on YAHOO.util.Event.addListener

The addListener function has been aliased by the shorter on function:

var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e) {
		alert("myElementId was clicked");
	};
	YAHOO.util.Event.on(myElement, 'click', fnCallback);

By passing an object in as the optional fifth argument of addListener, instead of a Boolean, you can change the execution context of the callback to that object, while still passing in an another object as the optional fourth argument:

var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e, obj) {
		// this executes in the context of 'ctx'
		alert(obj);
	};
	var obj = "I was passed through.";
	var ctx = {
		/* some object to be the execution context of callback */
	};
	YAHOO.util.Event.addListener(
		myElement,'click',fnCallback,obj, ctx);

Lastly, there is an optional Boolean value that can be provided as the sixth argument of addListener, which causes the callback to execute in the event capture phase, instead of the event bubbling phase. You probably won’t ever need to set this value to true, but if you want to learn more about JavaScript event phases see:

http://www.quirksmode.org/js/events_order.html

See also

Refer to Removing event listeners, to learn about how to remove event callbacks when they are not longer needed.

Event normalization functions

The event object, provided as the first argument of the callback function, contains a variety of values that you may need to use (such as the target element, character code, etc.). YUI provides a collection of static functions that normalizes the cross-browser variations of these values. Before trying to use these properties, you should read this recipe, as it walks you through each of those functions.

How to do it…

Fetch the normalized target element of an event:

var fnCallback = function(e) {
		var targetElement = YAHOO.util.Event.getTarget(e);
		alert(targetElement.id);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);

Fetch the character code of a key event (also known as the key code):

var fnCallback = function(e) {
		var charCode = YAHOO.util.Event.getCharCode(e);
		alert(charCode);
	};
	YAHOO.util.Event.on('myElementId', 'keypress', fnCallback);

Fetch the x and y coordinates of a mouse event:

var fnCallback = function(e) {
		var x = YAHOO.util.Event.getPageX(e);
		var y = YAHOO.util.Event.getPageY(e);
		alert("x-position=" + x + " and x-position= " + y);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);

Fetch both the x and y coordinates of a mouse event, using:

var fnCallback = function(e) {
		var point = YAHOO.util.Event.getXY(e);
		alert("x-position="+point[0]+" and x-position= "+point[1]);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);

Fetch the normalized related target element of an event:

var fnCallback = function(e) {
		var targetElement = YAHOO.util.Event.getRelatedTarget(e);
		alert(targetElement.id);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);

Fetch the normalized time of an event:

var fnCallback = function(e) {
		var time = YAHOO.util.Event.getTime(e);
		alert(time);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);

Stop the default behavior, propagation (bubbling) of an event, or both:

var fnCallback = function(e) {
		// prevents the event from bubbling up to ancestors
		YAHOO.util.Event.stopPropagation(e);
		// prevents the event's default
		YAHOO.util.Event.preventDefault(e);
		// prevents the event's default behavior and bubbling
		YAHOO.util.Event.stopEvent(e);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);

How it works…

All of these functions test to see if a value exists on the event for each cross-browser variation of a property. The functions then normalize those values and return them. The stopPropogation and preventDefault functions actually modify the equivalent cross-browser property of the event, and delegate the behavior to the browsers.

See also

Refer to Using YUI helper functions, for information on event delegation, which can be used to improve the performance of events.

Removing event listeners

As with attaching listeners, there are two browser variations for removing events and legacy browser considerations as well. Additionally, when using the native event removal functions, you must pass in exactly the same arguments as you passed to the native add event functions. YUI not only handles the cross-browser variations, but ensures that you pass the correct arguments when removing a function. This recipe shows several ways to remove event listeners from elements.

How to do it…

Remove a callback function directly, by passing in the exact same arguments you used when calling addListener:

YAHOO.util.Event.removeListener('myElementId', 'click',
		fnCallback);

Removing all events of a specific type does not require the arguments from addListener:

// removes all 'click' type events from 'myElementId'
	YAHOO.util.Event.removeListener('myElementId', 'click');

Remove all listeners from an element:

YAHOO.util.Event.purgeElement('myElementId');

Remove all listeners from an element and its descendant elements recursively:

YAHOO.util.Event.purgeElement('myElementId', true);

Remove all events of a specific type from an element and its descendant elements recursively:

// removes all 'click' type events
	YAHOO.util.Event.purgeElement('myElementId', true, 'click');

How it works…

In most cases YUI calls the native browser remove listener function, with the proper arguments from the internal array of listeners, and removes the listeners from its internal array. In legacy browsers, YUI simply deletes the function that was added to the event.

There’s more…

Like the addListener function, the removeListener functions can accept either an element object or the id attribute of an element as its fi rst parameter. If the element cannot be found, YUI fails silently.

To prevent memory leaks and improve site performance, YUI attaches an unload event listener, which removes all event listeners when the page unloads. When removing nodes from the DOM, you should call purgeElement on any element that might (or whose descendant elements might) have events attached to them.

Listening for key events

The native browser support for key events is identical to other events, except in addition to the other properties, the character code is attached to the event object. There are several browser variations to where the character code is stored and some value discrepancies. YUI handles these cross-browser issues, as well as adding the ability to test for key combinations (such as ‘ctrl’ plus another key), and a simplifi ed interface. This recipe explains how to listen for key events, and how to leverage the more powerful YUI key management functions.

How to do it…

Listen for the keypress event and fi nd the character code:

var fnCallback = function(e) {
		var charCode = YAHOO.util.Event.getCharCode(e);
		alert('Key pressed with character code ' + charCode);
	};
	YAHOO.util.Event.on('myElementId', 'keypress', fnCallback);

The event callback has some properties which are true when the Alt, Control, or Shift keys are pressed along with the triggering key:

var fnCallback = function(e) {
		if (e.altKey) {
			alert("alt key was pressed as well");
		}
		if (e.ctrlKey) {
			alert("control key was pressed as well");
		}
		if (e.shiftKey) {
			alert("shift key was pressed as well");
		}
	};
	YAHOO.util.Event.on('myElementId', 'keypress', fnCallback);

Use the KeyListener function to effortlessly attach key events:

var fnCallback = function(e) {
		alert("The enter key was pressed");
	};
	var keyObj = {keys:13};
	var keyHandle =
		new YAHOO.util.KeyListener('myElemId', keyObj, fnCallback);
		keyHandle.enable();

Use the KeyListener function to listen for several key events when Ctrl is also pressed:

var fnCallback = function(e) {
		alert("Up, Right, Down, or Left and Control was pressed");
	};
	var keyObj = {
		alt: false,
		ctrl: true,
		shift: false,
		keys: [37,38,39,40]
	};
	var keyHandle =
		new YAHOO.util.KeyListener('myElemId', keyObj, fnCallback);
	keyHandle.enable();

The KeyListener function returns an object with two functions, enable and disabled, which allow you to turn the event listener on and off:

// turn off the key listener
	keyHandle.disable();
	// turn on the key listener
	keyHandle.enable();

How it works…

When subscribing to any key event directly, YUI behaves as it does with other events, wrapping the native event and handling-cross browser variations. The getCharCode function checks the event object for the browser variations of character code, and normalizes the value.

The KeyListener function wraps a keydown event with an instantiatable object that checks the character codes before executing the callback. The disable and enable functions of the returned object respectively call removeListener and addListener for you. You must call the enable function before the instantiated KeyListener to work.

There’s more…

The second argument of the KeyListener function is called the keyData object, and requires the keys property, but the Boolean values alt, ctrl, and shift are optional. The keys property can either be a single or an array of integer character codes.

By default the KeyListener function listens for the keydown event, but you can also specify the keyup event by passing it as a fourth optional argument:

var fnCallback = function(e) {
		alert("The escape key was keyed up");
	};
	var keyObj = {keys:27};
	var KeyListener = YAHOO.util.KeyListener;
	var keyHandle =
		new KeyListener('myElemId', keyObj, fnCallback, 'keyup');
	keyHandle.enable();

Also, common key codes are available for you on a static object:

YAHOO.util.KeyListener.KEY = {
		ALT : 18,
		BACK_SPACE : 8,
		CAPS_LOCK : 20,
		CONTROL : 17,
		DELETE : 46,
		DOWN : 40,
		END : 35,
		ENTER : 13,
		ESCAPE : 27,
		HOME : 36,
		LEFT : 37,
		META : 224,
		NUM_LOCK : 144,
		PAGE_DOWN : 34,
		PAGE_UP : 33,
		PAUSE : 19,
		PRINTSCREEN : 44,
		RIGHT : 39,
		SCROLL_LOCK : 145,
		SHIFT : 16,
		SPACE : 32,
		TAB : 9,
		UP : 38
	};

Using special YUI only events

The Event component has two special events to bubble the focus and blur events, and two events that emulate IE’s mouseenter and mouseleave events. This recipe explains how to use each of these events.

Getting ready

Use the following DOM for the examples in this recipe:

<div id="myElementId">
		<h3 id="myHeaderId">Example Title</h3>
		<input name="myTextInput1" type="text'/>
		<input name="myTextInput2" type="text'/>
		<input name="myTextInput3" type="text'/>
	</div>

You will need to include the event-mouseenter optional component for the mouse events in this recipe:

<script src="pathToBuild/event-mouseenter/event-mouseenter-min.js"
		type="text/javascript"></script>

How to do it…

Use the special focusin event to handle bubbling focus events:

// the focus of all 3 inputs can be handled by one callback
	YAHOO.util.Event.on("myElementId", "focusin", function(e) {
		var targ = YAHOO.util.Event.getTarget(e);
		alert("focused on target: " + targ.name);
	});

Use the special focusout event to handle bubbling blur events:

// the blur of all 3 inputs can be handled by one callback
	YAHOO.util.Event.on("myElementId", "focusout", function(e) {
		var targ = YAHOO.util.Event.getTarget(e);
		alert("blurred on target: " + targ.name);
	});

Use the mouseenter event to fi re an event once when the mouse first enters an element:

// this callback fire once when the mouse enters the p tag
	YAHOO.util.Event.on('myHeaderId', 'mouseenter', function(e){
		alert("Mouse entered: " + this.id);
	});

Use the mouseleave event to fi re an event once when the mouse first leaves an element:

// this callback fire once when the mouse enters the p tag
	YAHOO.util.Event.on('myHeaderId', 'mouseleave', function(e){
		YAHOO.log("Mouse left: " + this.id);
	});

How it works…

The focusin and focusout are special-cased events that leverage the capture phase of JavaScript events to emulate bubbling of blur and focus events.

The mouseenter and mouseleave events use IE’s native event of the same name, but in other browsers YUI adds listeners to the mouseover and mouseout events of an element to emulate the behavior. YUI removes or re-attaches these events as necessary, to minimize the number of event subscribers.

Using YUI helper event functions

YUI events have four useful helpers functions: delegate, onAvailable, onContentReady, and onDOMReady. These functions augment how developers interact with the DOM. This recipe explains how they work.

Getting ready

To use the delegate function in this recipe, you will need to include the event-delegate and Selector components. Use the following DOM for the examples in this recipe:

<div id="myElementId">
		<ul>
			<li><a href="#" id="link1">Item Type One</a></li>
			<li><a href="#" id="link2">Item Type Two</a></li>
			<li><a href="#" id="link3">Item Type Three</a></li>
		</ul>
	</div>

How to do it…

Use event delegation to have a single handler for all three anchors:

YAHOO.util.Event.delegate("myElementId", "click",
	function(e, matchedElement, container) {
		// The matchedElement is the default scope
		alert("Default scope id: " + this.id);
		alert("Clicked link id: " + matchedElement.id);
		/* The actual click target, which could be the matched item or a
		descendant of it. */
		alert("Event target: " + YAHOO.util.Event.getTarget(e));
		// The delegation container is passed as a third argument
		alert("Delegation container: " + container.id);
	}, "li a");

Remove event delegation with the removeDelegate function:

YAHOO.util.Event.removeDelegate("myElementId", "click",
		fnCallback);

Use onAvailable to fi re a function as soon as an element is detected in the DOM:

var fnCallback = function(obj) {
		alert('myElementId is now available');
	};
	var obj = {/* optional pass-through object */};
	YAHOO.util.Event.onAvailable('myElementId', fnCallback, obj);

Use onContentReady to fi re a function as soon as an element and its nextSibling are
detected in the DOM:

var fnCallback = function(obj) {
		// the execution context was changed to obj
		alert('myElementId is now ready');
	};
	var obj = {/* optional pass-through object */};
	YAHOO.util.Event.onContentReady('myElementId', fnCallback,
		obj, true);

Fire a callback function as soon as the DOM has fi nished loading:

var fnCallback = function(obj) {
		// the execution context was changed to window
		alert('The DOM is now available');
	};
	var obj = {/* optional pass-through object */};
	YAHOO.util.Event.onDOMReady(fnCallback, obj, window);

How it works…

Event delegation works by attaching one event listener, of the specifi ed type, to the container element (argument one). When the specifi ed event type fi res, anywhere on the container element, the DOM path from the event target to the container element is compared against the selector specifi ed as the fourth argument of the delegate function. If the selector matches, then the callback function is executed.

The onAvailable and onContentReady functions poll the DOM until the element is available by document.getElementById or the window load event isfired. The onContentReady function only differs from onAvailable, in that it waits until the nextSibling of the element is also available to ensure that its descendants have completely loaded.

There’s more…

The onAvailable and onContentReady functions have signatures exactly like the addListener function, except without the event type. You can use both functions after the window load event fi res, and they will poll the DOM for up to 10 seconds.

The onDOMReady function also shares a signature with addListener, except without the element and event type. The recipes for these three functions show the variations you could use for the optional fourth and fi fth arguments.

Attaching fewer events to the DOM improves the performance of your
	site. Use the event delegation function as much as possible to reduce
	the number of event listeners.

See also

Refer to Using YUI to attach JavaScript event listeners, for more information on the optional arguments for onAvailable and onContentReady.

Using custom events

YUI provides a framework for publishing and fi ring arbitrary events that you create. This simple feature drives much of the framework, and is the basis for most of the more complicated widgets covered in this book. This recipe shows you how to create, subscribe to, and fire custom events.

How to do it…

Create a basic custom event:

var myEvent =	new YAHOO.util.CustomEvent('myEvent');

Create a custom event, whose callback has the specifi ed execution context:

var ctx = {};
	var myEvent = new YAHOO.util.CustomEvent('myEvent', ctx);

Subscribe to a custom event:

var myCallback = function(eventName, fireArgs, obj) {
		/* … */
	};
	myEvent.subscribe(myCallback);

Fire a custom event:

myEvent.fire();

Unsubscribe one callback from a custom event:

// the signature is the same as the subscribe function
	if (myEvent.unsubscribe(myCallback)) {
		alert('callback unsubscribed successfully');
	}

Unsubscribe all callbacks from a custom event:

myEvent.unsubscribeAll();

How it works…

The custom event framework maintains an array of all instantiated custom events, and an object to map the event names to the custom event object. Custom event objects contain a list of subscriber callback functions, logic to handle scope normalization, and logic for passing parameters from its constructor, subscribe, and fire functions to each subscriber function. The unsubscribe function removes the specifi ed function by comparing the provided function against each subscriber function, and unsubscribeAll will truncate the array of subscriber functions.

There’s more…

When calling the fire function of a custom event (and using the default callback signature), you can pass any number of arguments into the fire function, and they will be passed as an array to the second argument of each subscriber function.

When calling the unsubscribe function you should pass it the same signature as well calling the subscribe function to ensure the removal of the correct subscriber function.

The following subsections explain optional arguments that can be provided for the functions discussed in this recipe:

Instantiation function arguments

When instantiating a CustomEvent object, you need to only provide the fi rst argument, which is the event name, but you can provide up to four additional arguments:

var myEvent = YAHOO.util.CustomEvent('myEvent', this, false, YAHOO.
	util.CustomEvent.LIST, false);

Subscribe function

When calling the subscribe function you must pass a required callback function as the first argument, but can also pass up to two additional arguments:

var newContext = { /* … */ };
	var obj = { /* … */ };
	var myCallback = function(type, fireArgs, obj) {
		/* … */
	}
	myEvent.subscribe(myCallback, obj, newContext);

Subscriber callback functions

When the signature is CustomEvent.LIST (the default value) the following arguments will be passed to the subscriber callback functions when the custom event is fi red:

See also

Refer to Apply EventProvider to manage custom events on objects for information on how to more effectively use custom events with objects.

The simple way to add custom events to classes

Since custom events drive much of the YUI framework, the developers have created the YAHOO.util.EventProvider class to simplify interacting with custom events on classes.
This recipe explains how to apply EventProvider to your classes and leverage its subscription model.

How to do it…

Apply EventProvider to your class:

var MyClass = function() {/* … */};
	MyClass.prototype = {/* … */};
	YAHOO.lang.augment(MyClass, YAHOO.util.EventProvider);
	var myClassInst = new MyClass();

Create an event on myClassInst:

myClassInst.createEvent('myEvent');

Subscribe to an event on myClassInst:

var myCallback = function() {/* … */};
	myClassInst.subscribe('myEvent', myCallback);

Test if an event has been created on myClassInst:

if (myClassInst .hasEvent('myEvent')) {
		alert('myEvent has been created');
	}

Fire an event on myClassInst:

myClassInst.fireEvent('myEvent');

Unsubscribe a callback from an event on myClassInst:

myClassInst.unsubscribe('myEvent', myCallback);

Unsubscribe from all callbacks from an event on myClassInst:

myClassInst.unsubscribeAll('myEvent');

Unsubscribe all events on myClassInst:

myClassInst.unsubscribeAll();

How it works…

When creating an event using the EventProvider framework, YUI prefaces the event name with a unique ID, so that custom event names are unique per object. Thus fi ring a custom event called myEvent on object A, does not execute callbacks subscribing to myEvent on object B. Otherwise, the functions work like their counterparts from the previous recipe, except they require you to specify the event name as the fi rst argument. The only exception to this rule is the fireEvent function , which calls the subscriber functions using the CustomEvent.FLAT argument signature, instead of CustomEvent.LIST.

There’s more…

The createEvent function will return the CustomEvent object that it creates or a previously existing one with the same name. The createEvent function instantiates the custom event object and hence you have less control over the instantiation arguments. However, you can pass a confi guration object as the second optional argument of createEvent, with the following properties:

Any subscriber functions applied using the subscribe function
	before calling the createEvent function will be lost. Make sure,
	when instantiating classes you made, that you create all events the
	class may use.

See also

Using custom events, for more information on optional arguments that can be passed to the event functions.

The extending JavaScript objects, the YUI way, for more information on how to create your own extendable JavaScript objects.