JavaScript DHTML/HTML/HTML Body Event

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/HTML_Body_Event&oldid=2619»