pebreo/jquery-events-demo.html

## jquery-events-demo.html
<!-- BASIC JOUERY EVENT DEMO2 -->
<html>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
	<head>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

		<!--<script src="http://code.jquery.com/jquery-latest.js"></script> -->


		<script type="text/javascript">
			$("document").ready(function(){
				//first button
				$("#oneButton").bind('click',alertButtonClick);
				//second button
				$("#twoButton").bind('dblclick',alertDoubleClick);
				//textbox
				$("#textBox1").bind('blur', onBlurEvent)
							  .bind('focus',onFocusEvent)
							  .bind('onmousedown',onMDownEvent)
							  .bind('onmouseup',onMUpEvent)
							  .bind('change',onChangeEvent);

				$(window).resize(resizedWindow);

				//unbind
				$("#threeButton").bind('click',unbindLogo);

				//logo
				$("#logo").bind('mouseover',mouseOverMe)
				          .bind('mouseout',mouseOutMe);

				// form submission
				$("#myform").submit(function() {
					alert("submitted");

				});
				// track keypresses, mousemovements, and all events in general
				$("#theBody").bind('keyup',checkKeyPressed).bind('mousemove',
					theMouseMoved).click(event,eventTriggered);


			});

			//leave the textfield event
			function onBlurEvent()
			{

				$("#second").html("You left the box");
			}
			// go into textfield
			function onFocusEvent()
			{

				$("#second").html("You entered the box");
			}
			//focus cursor on box
			function onMDownEvent()
			{

				$("#second").html("You left the box");
			}

			// unfocuse cursor on box
			function onMUpEvent()
			{

				$("#second").html("You entered the box");
			}
			// changing textfield
			function onChangeEvent()
			{

				$("#third").html("You changed the box");
			}
			// on resize event
			function resizedWindow()
			{
				$("#second").html("Window was resized W: " + $(window).width() + " H: " + $(window).height());
			}

			// click button
			function alertButtonClick(){

				alert("there was a button clicked");
			}
			//double-click button
			function alertDoubleClick() {
				alert("there was a double click");
			}

			// mouseover event
			function mouseOverMe()
			{

				$("#second").html("You put your cursor on my logo");
			}
			// mouseout event
			function mouseOutMe()
			{

				$("#second").html("You stopped touching my logo");
			}

			//unbind logo
			function unbindLogo()
			{
				alert("Unbinding logo events");
				$("#logo").unbind('mouseover',mouseOverMe)
				          .unbind('mouseout',mouseOutMe);
			}
			// keypress
			function checkKeyPressed(event)
			{
				$("#fifth").text(String.fromCharCode(event.keyCode));
			}
			// mouse movement
			function theMouseMoved(event)
			{
				$("#seventh").html(event.screenX);
				$("#ninth").html(event.screenY);
			}
			//timestamp and name of clicked element
			function eventTriggered(event)
			{
				$("#tenth").text(event.target.nodeName) // print out the node of what you clicked
				$("#eleventh").html(event.timeStamp);
			}

		</script>
		<noscript>
			This site requires Javascript.
		</noscript>
	</head>

<body id="theBody">

<div><h3>JQuery Event Handlers</h3></div>


<div>

<img src='favicon.png' id='logo' alt='Little Brain' />

</div>

<br />


<div>

<p><strong>Events Triggered on the Page:</strong></p>

<p id="second">Waiting for Event</p>

<p id="third">Waiting for Change</p>

</div>


<div>

<p><strong>Key Events Triggered on the Page:</strong></p>

<span id="fourth">Key Pressed:</span>

<span id="fifth">Waiting for Change</span>

</div><br />


<div>

<p><strong>Mouse Movements on the Page:</strong></p>

<span id="sixth">Mouse X Coordinate:</span>

<span id="seventh">Waiting for Change</span><br />

<span id="eighth">Mouse Y Coordinate:</span>

<span id="ninth">Waiting for Change</span><br />

<span>Textbox Changed: </span>

<span id="tenth">Waiting for Event</span><br />

<span>Element Changed When: </span>

<span id="eleventh">Event Occurred When</span>

</div><br />


<form id="myform" action="">

<button type="button" id="oneButton">Alert on Click</button>

<button type="button" id="twoButton">Click on me Twice</button>

<button type="button" id="threeButton">Unbind Logo</button>

<input type='text' id="textBox1" size=40>

<input type='submit' value='Send'>

</form>

	</body>

</html>
	<!-- BASIC JOUERY EVENT DEMO2 -->
	<html>
	<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
	<head>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<!--<script src="http://code.jquery.com/jquery-latest.js"></script> -->


	<script type="text/javascript">
	$("document").ready(function(){
	//first button
	$("#oneButton").bind('click',alertButtonClick);
	//second button
	$("#twoButton").bind('dblclick',alertDoubleClick);
	//textbox
	$("#textBox1").bind('blur', onBlurEvent)
	.bind('focus',onFocusEvent)
	.bind('onmousedown',onMDownEvent)
	.bind('onmouseup',onMUpEvent)
	.bind('change',onChangeEvent);

	$(window).resize(resizedWindow);

	//unbind
	$("#threeButton").bind('click',unbindLogo);

	//logo
	$("#logo").bind('mouseover',mouseOverMe)
	.bind('mouseout',mouseOutMe);

	// form submission
	$("#myform").submit(function() {
	alert("submitted");

	});
	// track keypresses, mousemovements, and all events in general
	$("#theBody").bind('keyup',checkKeyPressed).bind('mousemove',
	theMouseMoved).click(event,eventTriggered);



	});

	//leave the textfield event
	function onBlurEvent()
	{

	$("#second").html("You left the box");
	}
	// go into textfield
	function onFocusEvent()
	{

	$("#second").html("You entered the box");
	}
	//focus cursor on box
	function onMDownEvent()
	{

	$("#second").html("You left the box");
	}

	// unfocuse cursor on box
	function onMUpEvent()
	{

	$("#second").html("You entered the box");
	}
	// changing textfield
	function onChangeEvent()
	{

	$("#third").html("You changed the box");
	}
	// on resize event
	function resizedWindow()
	{
	$("#second").html("Window was resized W: " + $(window).width() + " H: " + $(window).height());
	}

	// click button
	function alertButtonClick(){

	alert("there was a button clicked");
	}
	//double-click button
	function alertDoubleClick() {
	alert("there was a double click");
	}

	// mouseover event
	function mouseOverMe()
	{

	$("#second").html("You put your cursor on my logo");
	}
	// mouseout event
	function mouseOutMe()
	{

	$("#second").html("You stopped touching my logo");
	}

	//unbind logo
	function unbindLogo()
	{
	alert("Unbinding logo events");
	$("#logo").unbind('mouseover',mouseOverMe)
	.unbind('mouseout',mouseOutMe);
	}
	// keypress
	function checkKeyPressed(event)
	{
	$("#fifth").text(String.fromCharCode(event.keyCode));
	}
	// mouse movement
	function theMouseMoved(event)
	{
	$("#seventh").html(event.screenX);
	$("#ninth").html(event.screenY);
	}
	//timestamp and name of clicked element
	function eventTriggered(event)
	{
	$("#tenth").text(event.target.nodeName) // print out the node of what you clicked
	$("#eleventh").html(event.timeStamp);
	}

	</script>
	<noscript>
	This site requires Javascript.
	</noscript>
	</head>

	<body id="theBody">

	<div><h3>JQuery Event Handlers</h3></div>





	<div>

	<img src='favicon.png' id='logo' alt='Little Brain' />

	</div>

	<br />



	<div>

	<p><strong>Events Triggered on the Page:</strong></p>

	<p id="second">Waiting for Event</p>

	<p id="third">Waiting for Change</p>

	</div>



	<div>

	<p><strong>Key Events Triggered on the Page:</strong></p>

	<span id="fourth">Key Pressed:</span>

	<span id="fifth">Waiting for Change</span>

	</div><br />



	<div>

	<p><strong>Mouse Movements on the Page:</strong></p>

	<span id="sixth">Mouse X Coordinate:</span>

	<span id="seventh">Waiting for Change</span><br />

	<span id="eighth">Mouse Y Coordinate:</span>

	<span id="ninth">Waiting for Change</span><br />

	<span>Textbox Changed: </span>

	<span id="tenth">Waiting for Event</span><br />

	<span>Element Changed When: </span>

	<span id="eleventh">Event Occurred When</span>

	</div><br />



	<form id="myform" action="">

	<button type="button" id="oneButton">Alert on Click</button>

	<button type="button" id="twoButton">Click on me Twice</button>

	<button type="button" id="threeButton">Unbind Logo</button>

	<input type='text' id="textBox1" size=40>

	<input type='submit' value='Send'>

	</form>

	</body>

	</html>