PACS JavaScript
The Objectives of
Today’s SIG (September 15th, 2012) was :
- Learning Event Handlers
- Event Handlers in Script Code
- Using document.getElementById
- Other ways to register events
- The addEventListener () Method
- The attachEvent () Method
An event handler is
a predefined JavaScript property of an object
(in most case and element in the document) that is used to handle an
event on a Web Page. It's a way of
detecting user action and to have a definable reaction. i.e. a useful way to add interactivity to
your web page.
The JavaScript
events handler we discussed were:
Abort (onabort),
Blur (onblur), Change (onchange), Click (onclick), ContextMenu (oncontextmenu),
Copy (oncopy), Cut (oncut), Dblclick (ondblclick), Error (onerror), Focus
(onfocus), Keydown (onkeydown), Keypress (onkeypress), Keyup (onkeyup), Load
(onload), Mousedown (onmousedown), Mousemove (onmousemove), Mouseout
(onmouseout), Mouseover (onmouseover), Mouseup (onmouseup), Paste (onpaste),
Reset (onreset), Resize (onresize), Scroll (onscroll), Select (onselect),
Submit (onsubmit), Unload (onunload)
To give a brief
demonstration I created an Html document to that shows how the onclick event
handler works.
"Example1.html"
<body><form>
<input type="button" value="Click Me!"
onclick="window.alert('Hi!');window.alert('Bye!');" />
</form>
</body>
I modified it so
that I could play my dice roll game.
"Example1a.html"
<body><form>
<input type="button" value="Roll the Bones" onclick="diceroll();" />
</form>
<script type="text/javascript" src="js_event_01.js"></script>
</body>
For my third example
the html document calls up a js file.
"Example1b.html"
<body><form>
<input type="button" value="Roll the Bones" id="boneroll" />
<br/>
<input type="button" value="Gambling is evil" id="noroll" />
</form>
<script type="text/javascript" src="js_event_02.js"></script>
</body>
"js_event_02.js"
function diceroll()
{var numb1=Math.floor(Math.random()*6+1);
var numb2=Math.floor(Math.random()*6+1);
window.alert("Roll 1 ="+numb1+" and Roll 2 ="+numb2);
// window.alert(numb2);
}
var rollbutton = document.getElementById("boneroll");
rollbutton.onclick=diceroll;
For my fourth
example I created an html document that uses many of the different event
handlers on one page.
"Example2.html"
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/shtmll/DTD/shtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PACS JavaScript SIG</title>
</head>
<body onload="window.alert('I\'m done loading now!');">
<h1>PACS - JavaScript SIG / Examples of other Event Handlers</h1>
<br/>
<a href="http://none"
onclick="window.alert('Hey! You clicked me!'); return false;">
Don't Click Me</a>
<br/>
<a href="http://www.pagersource.com"
onmouseover="window.alert('I told you not to try and click me!');">
Don't try Clicking Me! </a>
<br/>
<a href="http://www.pageresource.com"
onmouseout="window.alert('What, you didn\'t like my link?');">
Click Me! </a>
<br/>
<form>
Enter your Name:
<input type="text" onfocus="window.alert('Don\'t forget to capitalize!');"/>
<br/>
Give this box focus:<br/>
<input type="text" onblur="window.alert('Hey! Come back!');" /><br/>
then give this box focus to blur the first one:<br/>
<input type="text" /><br/>
Are you cool?<br/>
<select onchange="window.alert('why did you change that?');">
<option selected="selected">yes</option>
<option>No</option>
</select>
<br/>
<input type="button" value="Do not Click Here"
onclick="window.alert('I told you not to click me!');">
<br/>
</form>
<Form onsubmit="window.alert('Thank you');">
What's you name?<br/>
<input type="text" id="thename" /><br/>
<input type="submit" value="Submit Form">
</form>
</body>
For the discussion
of the document.getElementById I used the following example.
"Example3.html"
<script
type="text/javascript">function notEmpty(){
var
myTextField = document.getElementById('myText');
if(myTextField.value
!= "")
alert("You
entered: " + myTextField.value)
else
alert("Would
you please enter some text?")
}
</script><input type='text' id='myText' />
<input type='button' onclick='notEmpty()' value='Form Checker' />
