JavaScript DHTML/HTML/HTML Body Event

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

Calling to Display the Alert Dialog Directly

   <source lang="html4strict">

<html> <head> 

 <title>Dialog Test</title>
 <script type="text/javascript">
 
 </script>

</head> <body> 

 
   Test page of default JavaScript call

</body> </html> 


      </source>


Calling to Display the Alert Dialog onLoad

   <source lang="html4strict">

<html> <head> 

 <title>Dialog from onLoad</title>
 <script type="text/javascript">
 
 </script>

</head> <body onload="opendoc()"> 

 
   Test page of onLoad JavaScript call

</body> </html> 


      </source>


Handling Load Events in a Content Document

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Handling load events in a content document</TITLE> </HEAD> <BODY onLoad="alert("Hello!")" onUnload="alert("Bye Bye!")">

Handling load events in a content document

</BODY> </HTML> 

      </source>


JavaScript Event Handlers :Loading/ Unloading a Document

   <source lang="html4strict">

<html> <head> <title>Load/Unload Example</title>

<script language="JavaScript">

</script> </head> <body onLoad="checkBrowser()" onUnload="clean()">

Intranet Home Page

</body> </html> 

      </source>


onBlur and onFocus Event Handlers

   <source lang="html4strict">

/* 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>

onBlur and onBlur Event Handlers

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.

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.

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.

</BODY> </HTML> 


      </source>


Running a Script from the onLoad Event Handler

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>An onLoad script</TITLE> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </HEAD> <BODY onLoad="done()"> Here is some body text. </BODY> </HTML> 


      </source>


Using addBehavior() and removeBehavior()

   <source lang="html4strict">

/* 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>

addBehavior() and removeBehavior() Method Lab

This is a sample paragraph. After turning on the behavior, it will turn your selected color when you mouse down anywhere in this paragraph.

<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>
<INPUT TYPE="button" VALUE="Switch Off Behavior" onClick="turnOff()">

<INPUT TYPE="button" VALUE="Count the URNs" onClick="showBehaviorCount()">

</BODY> </HTML> 

      </source>


Using Event Bubbling with the onClick Event

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Using Event Bubbling</TITLE> <SCRIPT></SCRIPT> </HEAD> <BODY ONCLICK="documentClickHandler()">

Using Event Bubbling

<FORM ONCLICK="formClickHandler()"> <INPUT TYPE="BUTTON" ONCLICK="buttonClickHandler()" VALUE="Click here!"> </FORM> </BODY> </HTML> 

      </source>


Using the fireEvent() Method

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001

  • /

<HTML> <HEAD> <STYLE TYPE="text/css">

  1. 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()">

fireEvent() Method

This is a paragraph (with a nested SPAN) that receives click events.</SPAN>

Control Panel

<FORM NAME="controls">

<INPUT TYPE="checkbox" NAME="bubbleOn" onClick="event.cancelBubble=true">Cancel event bubbling.

<INPUT TYPE="button" VALUE="Fire Click Event on BODY" onClick="doFire("myBODY")">

<INPUT TYPE="button" VALUE="Fire Click Event on myP" onClick="doFire("myP")">

<INPUT TYPE="button" VALUE="Fire Click Event on mySPAN" onClick="doFire("mySPAN")">

</FORM> </BODY> </HTML> 


      </source>


Using the onSelectStart Event Handler

   <source lang="html4strict">

/* 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()">

onSelectStart Event Handler

This is a sample paragraph.

Column A Column B Column C
text text text
text text text

</BODY> </HTML> 

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