JavaScript DHTML/HTML/HTML Body Event
Содержание
- 1 Calling to Display the Alert Dialog Directly
- 2 Calling to Display the Alert Dialog onLoad
- 3 Handling Load Events in a Content Document
- 4 JavaScript Event Handlers :Loading/ Unloading a Document
- 5 onBlur and onFocus Event Handlers
- 6 Running a Script from the onLoad Event Handler
- 7 Using addBehavior() and removeBehavior()
- 8 Using Event Bubbling with the onClick Event
- 9 Using the fireEvent() Method
- 10 Using the onSelectStart Event Handler
Calling to Display the Alert Dialog Directly
<html>
<head>
<title>Dialog Test</title>
<script type="text/javascript">
<!--
alert("Dialog called");
// -->
</script>
</head>
<body>
<b>
Test page of default JavaScript call
</b>
</body>
</html>
Calling to Display the Alert Dialog onLoad
<html>
<head>
<title>Dialog from onLoad</title>
<script type="text/javascript">
<!--
function opendoc(){
alert("Dialog called ")
} -->
</script>
</head>
<body onload="opendoc()">
<b>
Test page of onLoad JavaScript call
</b>
</body>
</html>
Handling Load Events in a Content Document
<HTML>
<HEAD>
<TITLE>Handling load events in a content document</TITLE>
</HEAD>
<BODY onLoad="alert("Hello!")" onUnload="alert("Bye Bye!")">
<H1>Handling load events in a content document</H1>
</BODY>
</HTML>
JavaScript Event Handlers :Loading/ Unloading a Document
<html>
<head>
<title>Load/Unload Example</title>
<script language="JavaScript">
<!--
function checkBrowser() {
alert("load");
}
function clean() {
alert("unload");
}
// -->
</script>
</head>
<body onLoad="checkBrowser()" onUnload="clean()">
<font color="#008000">
<center><big><b>Intranet Home Page</b></big></center>
</body>
</html>
onBlur and onFocus Event Handlers
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>onBlur and onBlur Event Handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showBlur() {
var id = event.srcElement.id
alert("Element \"" + id + "\" has blurred.")
}
function showFocus() {
var id = event.srcElement.id
alert("Element \"" + id + "\" has received focus.")
}
</SCRIPT>
</HEAD>
<BODY>
<H1 ID="H1" TABINDEX=2>onBlur and onBlur Event Handlers</H1>
<HR>
<P ID="P1" onBlur="showBlur()" onFocus="showFocus()">Lorem ipsum
dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</P>
<P ID="P2" TABINDEX=1 onBlur="showBlur()" onFocus="showFocus()">Bis
nostrud exercitation ullam mmodo consequet. Duis aute involuptate
velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et
accusam dignissum qui blandit est praesent luptatum delenit
aigueexcepteur sint occae.</P>
<P ID="P3" onBlur="showBlur()" onFocus="showFocus()">Unte af phen
neigepheings atoot Prexs eis phat eit sakem eit vory gast te Plok
peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon
quiel ba trenzSpraadshaag ent trenz dreek wirc procassidt program.</P>
</BODY>
</HTML>
Running a Script from the onLoad Event Handler
<HTML>
<HEAD>
<TITLE>An onLoad script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function done() {
alert("The page has finished loading.")
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="done()">
Here is some body text.
</BODY>
</HTML>
Using addBehavior() and removeBehavior()
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>addBehavior() and removeBehavior() Methods</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var myPBehaviorID
function turnOn() {
myPBehaviorID = document.all.myP.addBehavior("makeHot.htc")
setInitialColor()
}
function setInitialColor() {
if (document.all.myP.readyState == "complete") {
var select = document.forms[0].colorChoice
var color = select.options[select.selectedIndex].value
document.all.myP.setHotColor(color)
} else {
setTimeout("setInitialColor()", 500)
}
}
function turnOff() {
document.all.myP.removeBehavior(myPBehaviorID)
}
function setColor(select, color) {
if (document.all.myP.hotColor) {
document.all.myP.setHotColor(color)
} else {
alert("This feature is not available. Turn on the Behavior first.")
select.selectedIndex = 0
}
}
function showBehaviorCount() {
var num = document.all.myP.behaviorUrns.length
var msg = "The myP element has " + num + " behavior(s). "
if (num > 0) {
msg += "Name(s): \r\n"
for (var i = 0; i < num; i++) {
msg += document.all.myP.behaviorUrns[i] + "\r\n"
}
}
alert(msg)
}
</SCRIPT>
</HEAD>
<BODY>
<H1>addBehavior() and removeBehavior() Method Lab</H1>
<HR>
<P ID="myP">This is a sample paragraph. After turning on the behavior,
it will turn your selected color when you mouse down anywhere in this
paragraph.</P>
<FORM>
<INPUT TYPE="button" VALUE="Switch On Behavior" onClick="turnOn()">
Choose a "hot" color:
<SELECT NAME="colorChoice" onChange="setColor(this, this.value)">
<OPTION VALUE="red">red
<OPTION VALUE="blue">blue
<OPTION VALUE="cyan">cyan
</SELECT><BR>
<INPUT TYPE="button" VALUE="Switch Off Behavior" onClick="turnOff()">
<P><INPUT TYPE="button" VALUE="Count the URNs" onClick="showBehaviorCount()"></P>
</BODY>
</HTML>
Using Event Bubbling with the onClick Event
<HTML>
<HEAD>
<TITLE>Using Event Bubbling</TITLE>
<SCRIPT><!--
function buttonClickHandler() {
alert("The onClick event was handled by buttonClickHandler()")
}
function formClickHandler() {
alert("The onClick event was handled by formClickHandler()")
}
function documentClickHandler() {
alert("The onClick event was handled by documentClickHandler()")
}
//--></SCRIPT>
</HEAD>
<BODY ONCLICK="documentClickHandler()">
<H1>Using Event Bubbling</H1>
<FORM ONCLICK="formClickHandler()">
<INPUT TYPE="BUTTON" ONCLICK="buttonClickHandler()" VALUE="Click here!">
</FORM>
</BODY>
</HTML>
Using the fireEvent() Method
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mySPAN {font-style:italic}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// assemble a couple event object properties
function getEventProps() {
var msg = ""
var elem = event.srcElement
msg += "event.srcElement.tagName: " + elem.tagName + "\n"
msg += "event.srcElement.id: " + elem.id + "\n"
msg += "event button: " + event.button
return msg
}
// onClick event handlers for body, myP, and mySPAN
function bodyClick() {
var msg = "Click event processed in BODY\n\n"
msg += getEventProps()
alert(msg)
checkCancelBubble()
}
function pClick() {
var msg = "Click event processed in P\n\n"
msg += getEventProps()
alert(msg)
checkCancelBubble()
}
function spanClick() {
var msg = "Click event processed in SPAN\n\n"
msg += getEventProps()
alert(msg)
checkCancelBubble()
}
// cancel event bubbling if check box is checked
function checkCancelBubble() {
event.cancelBubble = document.controls.bubbleOn.checked
}
// assign onClick event handlers to three elements
function init() {
document.body.onclick = bodyClick
document.all.myP.onclick = pClick
document.all.mySPAN.onclick = spanClick
}
// invoke fireEvent() on object whose ID is passed as parameter
function doFire(objID) {
var newEvt = document.createEventObject()
newEvt.button = 3
document.all(objID).fireEvent("onclick", newEvt)
// don"t let button clicks bubble
event.cancelBubble = true
}
</SCRIPT>
</HEAD>
<BODY ID="myBODY" onLoad="init()">
<H1>fireEvent() Method</H1>
<HR>
<P ID="myP">This is a paragraph <SPAN ID="mySPAN">(with a nested SPAN)</SPAN>
that receives click events.</SPAN></P>
<HR>
<P><B>Control Panel</B></P>
<FORM NAME="controls">
<P><INPUT TYPE="checkbox" NAME="bubbleOn" onClick="event.cancelBubble=true">Cancel event bubbling.</P>
<P><INPUT TYPE="button" VALUE="Fire Click Event on BODY" onClick="doFire("myBODY")"></P>
<P><INPUT TYPE="button" VALUE="Fire Click Event on myP" onClick="doFire("myP")"></P>
<P><INPUT TYPE="button" VALUE="Fire Click Event on mySPAN" onClick="doFire("mySPAN")"></P>
</FORM>
</BODY>
</HTML>
Using the onSelectStart Event Handler
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>onSelectStart Event Handler</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function showObj() {
var objID = event.srcElement.id
status = "Selection started with object: " + objID
}
</SCRIPT>
</HEAD>
<BODY ID="myBody" onSelectStart="showObj()">
<H1 ID="myH1">onSelectStart Event Handler</H1>
<HR ID="myHR">
<P ID="myP">This is a sample paragraph.</P>
<TABLE BORDER="1">
<TR ID="row1">
<TH ID="header1">Column A</TH>
<TH ID="header2">Column B</TH>
<TH ID="header3">Column C</TH>
</TR>
<TR ID="row2">
<TD ID="cellA2">text</TD>
<TD ID="cellB2">text</TD>
<TD ID="cellC2">text</TD>
</TR>
<TR ID="row3">
<TD ID="cellA3">text</TD>
<TD ID="cellB3">text</TD>
<TD ID="cellC3">text</TD>
</TR>
</TABLE>
</BODY>
</HTML>