bennadel/code-1.htm

## code-1.htm
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Plugin: triggerHandlers()</title>

	<!-- Include jQuery. -->
	<script type="text/javascript" src="./jquery-1.6.1.js"></script>
</head>
<body>

	<h1>
		jQuery Plugin: triggerHandlers()
	</h1>

	<ul class="friends">
		<li>
			Sarah
		</li>
		<li>
			Joanna
		</li>
		<li>
			Tricia
		</li>
	</ul>


	<script type="text/javascript">


		// Get a reference to the collection of friends.
		var friends = $( "ul.friends" );

		// Add an event to each of the friends.
		friends.children().bind(
			"click",
			function( event ){

				// Introduce yourself.
				console.log(
					"Hello, my name is",
					$.trim( $( this ).text() )
				);

			}
		);


		// Add a subsequent event (of the same type) to each of
		// the friends.
		friends.children().bind(
			"click",
			function( event ){

				// Excuse yourself.
				console.log( "Sorry, but I really must go." );

			}
		);


		// -------------------------------------------------- //
		// -------------------------------------------------- //
		// -------------------------------------------------- //
		// -------------------------------------------------- //


		// First, we're going to use the native triggerHandler()
		// method. This will activate all of the handlers on the
		// first element only. These events to not propagate.
		console.log( "Native triggerHandler()" );
		console.log( "---------------------------------------" );

		// Trigger the handlers.
		friends.children().triggerHandler( "click" );


		// -------------------------------------------------- //
		// -------------------------------------------------- //
		// -------------------------------------------------- //
		// -------------------------------------------------- //


		// Now, we're going to define a plugin for the "fn" namespace
		// (which is the jQuery prototype reference). We'll create a
		// triggerHandlers() (notice - plural) that will do the same
		// thing, but on all elements.
		$.fn.triggerHandlers = function( type, data ){

			// Flag that we want to use handlers only. This will take
			// care of all the bubbling and propagation limitations.
			var handlersOnly = true;

			// Loop over each element in the current collection to
			// trigger the handlers on each.
			this.each(
				function(){

					jQuery.event.trigger(
						type,
						data,
						this,
						handlersOnly
					);

				}
			);

			// Return this object reference for method chaining.
			return( this );

		};


		// Now that we have defined our plugin, we're going to invoke
		// the handlers on all selected elements.
		console.log( "\nPLUGIN triggerHandlers()" );
		console.log( "---------------------------------------" );

		// Now, call triggerHandlers() on the children.
		friends.children().triggerHandlers( "click" );


	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Plugin: triggerHandlers()</title>

	<!-- Include jQuery. -->
	<script type="text/javascript" src="./jquery-1.6.1.js"></script>
	</head>
	<body>

	<h1>
	jQuery Plugin: triggerHandlers()
	</h1>

	<ul class="friends">
	<li>
	Sarah
	</li>
	<li>
	Joanna
	</li>
	<li>
	Tricia
	</li>
	</ul>


	<script type="text/javascript">


	// Get a reference to the collection of friends.
	var friends = $( "ul.friends" );

	// Add an event to each of the friends.
	friends.children().bind(
	"click",
	function( event ){

	// Introduce yourself.
	console.log(
	"Hello, my name is",
	$.trim( $( this ).text() )
	);

	}
	);


	// Add a subsequent event (of the same type) to each of
	// the friends.
	friends.children().bind(
	"click",
	function( event ){

	// Excuse yourself.
	console.log( "Sorry, but I really must go." );

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //
	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// First, we're going to use the native triggerHandler()
	// method. This will activate all of the handlers on the
	// first element only. These events to not propagate.
	console.log( "Native triggerHandler()" );
	console.log( "---------------------------------------" );

	// Trigger the handlers.
	friends.children().triggerHandler( "click" );


	// -------------------------------------------------- //
	// -------------------------------------------------- //
	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// Now, we're going to define a plugin for the "fn" namespace
	// (which is the jQuery prototype reference). We'll create a
	// triggerHandlers() (notice - plural) that will do the same
	// thing, but on all elements.
	$.fn.triggerHandlers = function( type, data ){

	// Flag that we want to use handlers only. This will take
	// care of all the bubbling and propagation limitations.
	var handlersOnly = true;

	// Loop over each element in the current collection to
	// trigger the handlers on each.
	this.each(
	function(){

	jQuery.event.trigger(
	type,
	data,
	this,
	handlersOnly
	);

	}
	);

	// Return this object reference for method chaining.
	return( this );

	};


	// Now that we have defined our plugin, we're going to invoke
	// the handlers on all selected elements.
	console.log( "\nPLUGIN triggerHandlers()" );
	console.log( "---------------------------------------" );

	// Now, call triggerHandlers() on the children.
	friends.children().triggerHandlers( "click" );


	</script>

	</body>
	</html>