JavaScript DHTML/Window Browser/Browser Event

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

Cancelling and Redirecting Events in IE5.5+

   <source lang="html4strict">

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

  • /

<HTML onClick="revealEvent("HTML", event)"> <HEAD> <TITLE>Event Cancelling & Redirecting</TITLE> <SCRIPT LANGUAGE="JavaScript"> // display alert with event object info function revealEvent(elem, evt) { 

   var msg = "Event (from " + evt.srcElement.tagName + " at "
   msg += event.clientX + "," + event.clientY + ") is now at the "
   msg += elem + " element."
   alert(msg)

} function init() { 

   document.onclick = docEvent
   document.body.onclick = docBodEvent

} function docEvent() { 

   revealEvent("document", event)

} function docBodEvent() { 

   revealEvent("BODY", event)

} function buttonEvent(form) { 

   revealEvent("BUTTON", event)
   // cancel if checked (IE4+)
   event.cancelBubble = form.bubbleCancelState.checked
   // redirect if checked (IE5.5+)
   if (form.redirect.checked) {
       document.body.fireEvent("onclick", event)
   }

} </SCRIPT> </HEAD> <BODY onLoad="init()">

Event Cancelling & Redirecting

<FORM onClick="revealEvent("FORM", event)">

<BUTTON NAME="main1" onClick="buttonEvent(this.form)"> Button "main1" </BUTTON>

<INPUT TYPE="checkbox" NAME="bubbleCancelState" onClick="event.cancelBubble=true">Cancel Bubbling at BUTTON
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.cancelBubble=true"> Redirect Event to BODY

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


      </source>


Cancelling and Redirecting Events in NN6+

   <source lang="html4strict">

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

  • /

<HTML onClick="revealEvent("HTML", event)"> <HEAD> <TITLE>Event Cancelling & Redirecting</TITLE> <SCRIPT LANGUAGE="JavaScript"> // display alert with event object info function revealEvent(elem, evt) { 

   var msg = "Event (from " + evt.target.tagName + " at "
   msg += evt.clientX + "," + evt.clientY + ") is now at the "
   msg += elem + " element."
   alert(msg)

} function init() { 

   document.onclick = docEvent
   document.body.onclick = docBodEvent

} function docEvent(evt) { 

   revealEvent("document", evt)

} function docBodEvent(evt) { 

   revealEvent("BODY", evt)

} function buttonEvent(form, evt) { 

   revealEvent("BUTTON", evt)
   // redirect if checked
   if (form.redirect.checked) {
       document.body.dispatchEvent(evt)
   }
   // cancel if checked
   if (form.bubbleCancelState.checked) {
       evt.stopPropagation()
   }

} </SCRIPT> </HEAD> <BODY onLoad="init()">

Event Cancelling & Redirecting

<FORM onClick="revealEvent("FORM", event)">

<BUTTON NAME="main1" onClick="buttonEvent(this.form, event)"> Button "main1" </BUTTON>

<INPUT TYPE="checkbox" NAME="bubbleCancelState" onClick="event.stopPropagation()">Cancel Bubbling at BUTTON
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.stopPropagation()"> Redirect Event to BODY

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

      </source>


Document and Layer Event Capture and Release

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function setDocCapture(enable) { 

   if (!enable) {
       document.captureEvents(Event.CLICK)
   } else {
       document.releaseEvents(Event.CLICK)
   }

} function setLayerCapture(enable) { 

   if (!enable) {
       document.layer1.captureEvents(Event.CLICK)
   } else {
       document.layer1.releaseEvents(Event.CLICK)
   }

} function doMainClick(e) { 

   if (e.target.type == "button") {
       alert("Captured in top document")
   }

} document.captureEvents(Event.CLICK) document.onclick=doMainClick </SCRIPT> </HEAD> <BODY> Document-level and/or Layer-level capture of Event.CLICK

<FORM> <INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture <INPUT TYPE="checkbox" onMouseDown="setLayerCapture(this.checked)" CHECKED>Enable Layer Capture

<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 

   onClick="alert("Event finally reached Button:" + this.name)">

</FORM> <LAYER ID="layer1" LEFT=200 TOP=150 BGCOLOR="coral"> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function doLayerClick(e) { 

   if (e.target.type == "button") {
       alert("Captured in layer1")
   }

} layer1.captureEvents(Event.CLICK) layer1.onclick=doLayerClick </SCRIPT> </HEAD> <BODY> <FORM>

 layer1

<INPUT TYPE="button" VALUE="Button "layerButton1"" NAME="layerButton1" onClick="alert("Event finally reached Button:" + this.name)">

<INPUT TYPE="button" VALUE="Button "layerButton2"" NAME="layerButton2" onClick="alert("Event finally reached Button:" + this.name)">

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

      </source>


Event Bubbling Demonstration

   <source lang="html4strict">

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

  • /

<HTML onClick="alert("Event is now at the HTML element.")"> <HEAD> <TITLE>Event Bubbles</TITLE> <SCRIPT LANGUAGE="JavaScript"> function init() { 

   window.onclick = winEvent
   document.onclick = docEvent
   document.body.onclick = docBodEvent

} function winEvent() { 

   alert("Event is now at the window object level.")

} function docEvent() { 

   alert("Event is now at the document object level.")

} function docBodEvent() { 

   alert("Event is now at the BODY element.")

} </SCRIPT> </HEAD> <BODY onLoad="init()">

Event Bubbles

<FORM onClick="alert("Event is now at the FORM element.")"> <INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 

   onClick="alert("Event started at Button: " + this.name)">

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


      </source>


Handling onBlur and onFocus in Frames

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function gotFocus() { 

document.bgColor="#FFFFFF"

} function lostFocus() { 

document.bgColor="#FF0000";

} </SCRIPT> </HEAD> <BODY onFocus="gotFocus()" onBlur="lostFocus()">

Document 1

</BODY> </HTML> 

      </source>


IE4+ Event Coordinate Properties

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <TITLE>X and Y Event Properties (IE4+)</TITLE> <SCRIPT LANGUAGE="JavaScript"> function checkCoords() { 

   var form = document.forms[0]
   form.srcElemTag.value = "<" + event.srcElement.tagName + ">"
   form.clientCoords.value = event.clientX + "," + event.clientY
   form.pageCoords.value = (event.clientX + document.body.scrollLeft) + 
       "," + (event.clientY + document.body.scrollTop)
   form.offsetCoords.value = event.offsetX + "," + event.offsetY
   form.screenCoords.value = event.screenX + "," + event.screenY
   form.xyCoords.value = event.x + "," + event.y
   form.parElem.value = "<" + event.srcElement.offsetParent.tagName + ">"
   return false

} function handleSize() { 

   document.forms[0].resizeCoords.value = event.clientX + "," + event.clientY

} </SCRIPT> </HEAD> <BODY onMouseDown="checkCoords()" onResize="handleSize()">

X and Y Event Properties (IE4+)

Click on the button and in the DIV/image to see the coordinate values for the event object.

<FORM NAME="output">

IE Mouse Event Coordinates:
srcElement:<INPUT TYPE="text" NAME="srcElemTag" SIZE=10>
clientX, clientY:<INPUT TYPE="text" NAME="clientCoords" SIZE=10> ...With scrolling:<INPUT TYPE="text" NAME="pageCoords" SIZE=10>
offsetX, offsetY:<INPUT TYPE="text" NAME="offsetCoords" SIZE=10>
screenX, screenY:<INPUT TYPE="text" NAME="screenCoords" SIZE=10>
x, y:<INPUT TYPE="text" NAME="xyCoords" SIZE=10> ...Relative to:<INPUT TYPE="text" NAME="parElem" SIZE=10>
<INPUT TYPE="button" VALUE="Click Here">
Window Resize Coordinates:
clientX, clientY:<INPUT TYPE="text" NAME="resizeCoords" SIZE=10>

</FORM>

<IMG SRC="nile.gif" WIDTH=320 HEIGHT=240" BORDER=0>

</BODY> </HTML> 


      </source>


NN4 Capture, Release, and Route Events

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function setDocCapture(enable) { 

   if (!enable) {
       document.captureEvents(Event.CLICK)
   } else {
       document.releaseEvents(Event.CLICK)
       document.forms[0].setDocRte.checked = false
       docRoute = false
   }

} function setLayerCapture(enable) { 

   if (!enable) {
       document.layer1.captureEvents(Event.CLICK)
   } else {
       document.layer1.releaseEvents(Event.CLICK)
       document.forms[0].setLyrRte.checked = false
       layerRoute = false
   }

} var docRoute = false var layerRoute = false function setDocRoute(enable) { 

   docRoute = !enable

} function setLayerRoute(enable) { 

   layerRoute = !enable

} function doMainClick(e) { 

   if (e.target.type == "button") {
       alert("Captured in top document")
       if (docRoute) {
           routeEvent(e)
       }
   }

} document.captureEvents(Event.CLICK) document.onclick=doMainClick </SCRIPT> </HEAD> <BODY> Capture, Release, and Routing of Event.CLICK

<FORM> <INPUT TYPE="checkbox" NAME="setDocCap" 

onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture 

<INPUT TYPE="checkbox" NAME="setDocRte"

onMouseDown ="setDocRoute(this.checked)">And let event continue

<INPUT TYPE="checkbox" NAME="setLyrCap" onMouseDown ="setLayerCapture(this.checked)" CHECKED>Enable Layer Capture  <INPUT TYPE="checkbox" NAME="setLyrRte" onMouseDown ="setLayerRoute(this.checked)">And let event continue

<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 

   onClick="alert("Event finally reached Button:" + this.name)">

</FORM> <LAYER ID="layer1" LEFT=200 TOP=150 BGCOLOR="coral"> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function doLayerClick(e) { 

   if (e.target.type == "button") {
       alert("Captured in layer1")
       if (layerRoute) {
           routeEvent(e)
       }
   }

} layer1.captureEvents(Event.CLICK) layer1.onclick=doLayerClick </SCRIPT> </HEAD> <BODY> <FORM>  layer1
<P><INPUT TYPE="button" VALUE="Button "layerButton1"" 

   NAME="layerButton1"
onClick="alert("Event finally reached Button:" + this.name)">

<INPUT TYPE="button" VALUE="Button "layerButton2"" NAME="layerButton2" onClick="alert("Event finally reached Button:" + this.name)">

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


      </source>


NN4 Event Capture and Release 1

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function setDocCapture(enable) { 

   if (!enable) {
       document.captureEvents(Event.CLICK)
   } else {
       document.releaseEvents(Event.CLICK)
   }

} function doMainClick(e) { 

   if (e.target.type == "button") {
       alert("Captured in top document")
   }

} document.captureEvents(Event.CLICK) document.onclick=doMainClick </SCRIPT> </HEAD> <BODY> Basic document-level capture of Event.CLICK

<FORM> <INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture

<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 

   onClick="alert("Event finally reached Button:" + this.name)">

</FORM> <LAYER ID="layer1" LEFT=200 TOP=150 BGCOLOR="coral"> <HEAD> </HEAD> <BODY> <FORM>


<INPUT TYPE="button" VALUE="Button "layerButton1"" NAME="layerButton1" onClick="alert("Event finally reached Button:" + this.name)">

<INPUT TYPE="button" VALUE="Button "layerButton2"" NAME="layerButton2" onClick="alert("Event finally reached Button:" + this.name)">

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

      </source>


NN4 Redirecting Events

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function setDocCapture(enable) { 

   if (!enable) {
       document.captureEvents(Event.CLICK)
   } else {
       document.releaseEvents(Event.CLICK)
       document.forms[0].setDocRte.checked = false
       docRoute = false
   }

} function setLayerCapture(enable) { 

   if (!enable) {
       document.layer1.captureEvents(Event.CLICK)
   } else {
       document.layer1.releaseEvents(Event.CLICK)
       document.forms[0].setLyrRte.checked = false
       layerRoute = false
   }

} var docRoute = false var layerRoute = false function setDocRoute(enable) { 

   docRoute = !enable
   document.forms[0].setDocShortCircuit.checked = false
   docShortCircuit = false

} function setLayerRoute(enable) { 

   layerRoute = !enable
   document.forms[0].setLyrShortCircuit.checked = false
   layerShortCircuit = false

} var docShortCircuit = false var layerShortCircuit = false function setDocShortcut(enable) { 

   docShortCircuit = !enable
   if (docShortCircuit) {
       document.forms[0].setDocRte.checked = false
       docRoute = false
   }

} function setLayerShortcut(enable) { 

   layerShortCircuit = !enable
   if (layerShortCircuit) {
       document.forms[0].setLyrRte.checked = false
       layerRoute = false
   }

} function doMainClick(e) { 

   if (e.target.type == "button") {
       alert("Captured in top document")
       if (docRoute) {
           routeEvent(e)
       } else if (docShortCircuit) {
           document.layer1.document.forms[0].layerButton2.handleEvent(e)
       }
   }

} document.captureEvents(Event.CLICK) document.onclick=doMainClick </SCRIPT> </HEAD> <BODY> Redirecting Event.CLICK

<FORM> <INPUT TYPE="checkbox" NAME="setDocCap" 

onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture 

<INPUT TYPE="checkbox" NAME="setDocRte" 

onMouseDown ="setDocRoute(this.checked)">And let event continue

<INPUT TYPE="checkbox" NAME="setDocShortCircuit"

onMouseDown ="setDocShortcut(this.checked)">Send event to "layerButton2"

<INPUT TYPE="checkbox" NAME="setLyrCap" onMouseDown ="setLayerCapture(this.checked)" CHECKED>Enable Layer Capture  <INPUT TYPE="checkbox" NAME="setLyrRte" onMouseDown ="setLayerRoute(this.checked)">And let event continue <INPUT TYPE="checkbox" NAME="setLyrShortCircuit" onMouseDown ="setLayerShortcut(this.checked)">Send event to "layerButton2"<P>

<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 

   onClick="alert("Event finally reached Button:" + this.name)">

</FORM> <LAYER ID="layer1" LEFT=200 TOP=200 BGCOLOR="coral"> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function doLayerClick(e) { 

   if (e.target.type == "button") {

alert("Captured in layer1") 

       if (layerRoute) {
           routeEvent(e)
       } else if (layerShortCircuit) {
           document.forms[0].layerButton2.handleEvent(e)
       }
   }

} layer1.captureEvents(Event.CLICK) layer1.onclick=doLayerClick </SCRIPT> </HEAD> <BODY> <FORM>  layer1
<P><INPUT TYPE="button" VALUE="Button "layerButton1"" 

   NAME="layerButton1"
onClick="alert("Event finally reached Button:" + this.name)">

<INPUT TYPE="button" VALUE="Button "layerButton2"" NAME="layerButton2" onClick="alert("Event finally reached Button:" + this.name)">

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

      </source>


NN6 Event Capture and Bubble

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <TITLE>W3C DOM Event Propagation</TITLE> <SCRIPT LANGUAGE="JavaScript"> function init() { 

   // using old syntax to assign bubble-type event handlers
   window.onclick = winEvent
   document.onclick = docEvent
   document.body.onclick = docBodEvent
   // turn on click event capture for two objects
   document.addEventListener("click", docEvent, true)
   document.forms[0].addEventListener("click", formCaptureEvent, true)
   // set event listener for bubble
   document.forms[0].addEventListener("click", formBubbleEvent, false)

} function winEvent(evt) { 

   alert("Event is now at the window object level (" + getPhase(evt) + ").")

} function docEvent(evt) { 

   alert("Event is now at the **document** object level (" + getPhase(evt) + ").")

} function docBodEvent(evt) { 

   alert("Event is now at the BODY level (" + getPhase(evt) + ").")

} function formCaptureEvent(evt) { 

   alert("This alert triggered by FORM only on CAPTURE.")

} function formBubbleEvent(evt) { 

   alert("This alert triggered by FORM only on BUBBLE.")

} // reveal event phase of current event object function getPhase(evt) { 

   switch (evt.eventPhase) {
       case 1:
           return "CAPTURING"
           break
       case 2:
           return "AT TARGET"
           break
       case 3:
           return "BUBBLING"
           break
       default:
           return ""    
   }

} </SCRIPT> </HEAD> <BODY onLoad="init()">

W3C DOM Event Propagation

<FORM> <INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" onClick= 

   "alert("Event is now at the button object level (" + getPhase(event) + ").")">

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

      </source>


Preventing Bubble and Capture

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <TITLE>W3C DOM Event Propagation</TITLE> <SCRIPT LANGUAGE="JavaScript"> function init() { 

   // using old syntax to assign bubble-type event handlers
   window.onclick = winEvent
   document.onclick = docEvent
   document.body.onclick = docBodEvent
   // turn on click event capture for two objects
   document.addEventListener("click", docEvent, true)
   document.forms[0].addEventListener("click", formCaptureEvent, true)
   // set event listener for bubble

document.forms[0].addEventListener("click", formBubbleEvent, false) } function winEvent(evt) { 

   if (evt.target.type == "button") {
       alert("Event is now at the window object level (" + getPhase(evt) + ").")
   }

} function docEvent(evt) { 

   if (evt.target.type == "button") {
       alert("Event is now at the **document** object level (" +

getPhase(evt) + ").") 

   }

} function docBodEvent(evt) { 

   if (evt.target.type == "button") {
       alert("Event is now at the BODY level (" +

getPhase(evt) + ").") 

   }

} function formCaptureEvent(evt) { 

   if (evt.target.type == "button") {
       alert("This alert triggered by FORM only on CAPTURE.")
       if (document.forms[0].stopAllProp.checked) {
           evt.stopPropagation()
       }
   }

} function formBubbleEvent(evt) { 

   if (evt.target.type == "button") {
       alert("This alert triggered by FORM only on BUBBLE.")
       if (document.forms[0].stopDuringBubble.checked) {
           evt.preventBubble()
           }
   }

} // reveal event phase of current event object function getPhase(evt) { 

   switch (evt.eventPhase) {
       case 1:
           return "CAPTURING"
           break
       case 2:
           return "AT TARGET"
           break
       case 3:
           return "BUBBLING"
           break
       default:
           return ""    
   }

} </SCRIPT> </HEAD> <BODY onLoad="init()">

W3C DOM Event Propagation

<FORM> <INPUT TYPE="checkbox" NAME="stopAllProp">Stop all propagation at FORM
<INPUT TYPE="checkbox" NAME="stopDuringBubble">Prevent bubbling past FORM

<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" onClick= 

   "alert("Event is now at the button object level (" + getPhase(event) + ").")">

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


      </source>


Using the History Object to Navigate

   <source lang="html4strict">

<html> <head> <title>Using the History object</title> </head> <body>

Navigating with the History object

<form> 

 <input type="button" value="Back" onClick="window.history.back()">  
 <input type="button" value="Forward" onClick="window.history.forward()">

</form>

</body> </html> 

      </source>


Using the srcElement property

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>srcElement Property</TITLE> <SCRIPT LANGUAGE="JavaScript"> function highlight() { 

   var elem = event.srcElement
   if (elem.className == "bold") {
       document.styleSheets[0].rules[0].style.color = "red"
   } else {
       elem.style.color = "#FFCC00"
   }

} function restore() { 

   var elem = event.srcElement
   if (elem.className == "bold") {
       document.styleSheets[0].rules[0].style.color = "yellow"
   } else {
       elem.style.color = "red"
   }

} </SCRIPT> <STYLE TYPE="text/css"> .bold {font-weight:bold} </STYLE> </HEAD> <BODY onMouseDown="highlight()" onMouseUp="restore()">

srcElement Property

One event handler...

  • A
  • BB
  • CCC
  • DDDD

Text Text Text Text Text Text Text

</BODY> </HTML> 


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