JavaScript DHTML/Window Browser/Browser Event
Содержание
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>
<source lang="html4strict">
<html> <head> <title>Using the History object</title> </head> <body>
<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>