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