в 10:00, 26 мая 2010

2010-05-26T10:00:28Z

Admin: 1 версия

2010-05-26T07:28:35Z

1 версия

Новая страница

==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()">
<H1>Event Cancelling & Redirecting</H1>
<HR>
<FORM onClick="revealEvent("FORM", event)">
<P><BUTTON NAME="main1" onClick="buttonEvent(this.form)">
Button "main1"
</BUTTON></P>
<P><INPUT TYPE="checkbox" NAME="bubbleCancelState"
onClick="event.cancelBubble=true">Cancel Bubbling at BUTTON<BR>
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.cancelBubble=true">
Redirect Event to BODY</P>
</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()">
<H1>Event Cancelling & Redirecting</H1>
<HR>
<FORM onClick="revealEvent("FORM", event)">
<P><BUTTON NAME="main1" onClick="buttonEvent(this.form, event)">
Button "main1"
</BUTTON></P>
<P><INPUT TYPE="checkbox" NAME="bubbleCancelState"
onClick="event.stopPropagation()">Cancel Bubbling at BUTTON<BR>
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.stopPropagation()">
Redirect Event to BODY</P>
</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>
<B>Document-level and/or Layer-level capture of Event.CLICK</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture
<INPUT TYPE="checkbox" onMouseDown="setLayerCapture(this.checked)" CHECKED>Enable Layer Capture
<HR>
<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<BR><P><INPUT TYPE="button" VALUE="Button "layerButton1""
NAME="layerButton1"
onClick="alert("Event finally reached Button:" + this.name)"></P>
<P><INPUT TYPE="button" VALUE="Button "layerButton2""
NAME="layerButton2"
onClick="alert("Event finally reached Button:" + this.name)"></P>
</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()">
<H1>Event Bubbles</H1>
<HR>
<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()">
<H1>Document 1</H1>
</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()">
<H1>X and Y Event Properties (IE4+)</H1>
<HR>
<P>Click on the button and in the DIV/image to see the coordinate values for the
event object.</P>
<FORM NAME="output">
<TABLE>
<TR><TD COLSPAN=2>IE Mouse Event Coordinates:</TD></TR>
<TR><TD ALIGN="right">srcElement:</TD><TD><INPUT TYPE="text" NAME="srcElemTag"
SIZE=10></TD></TR>
<TR><TD ALIGN="right">clientX, clientY:</TD><TD><INPUT TYPE="text"
NAME="clientCoords" SIZE=10></TD>
<TD ALIGN="right">...With scrolling:</TD><TD><INPUT TYPE="text"
NAME="pageCoords" SIZE=10></TD></TR>
<TR><TD ALIGN="right">offsetX, offsetY:</TD><TD><INPUT TYPE="text"
NAME="offsetCoords" SIZE=10></TD></TR>
<TR><TD ALIGN="right">screenX, screenY:</TD><TD><INPUT TYPE="text"
NAME="screenCoords" SIZE=10></TD></TR>
<TR><TD ALIGN="right">x, y:</TD><TD><INPUT TYPE="text" NAME="xyCoords"
SIZE=10></TD>
<TD ALIGN="right">...Relative to:</TD><TD><INPUT TYPE="text" NAME="parElem"
SIZE=10></TD></TR>
<TR><TD ALIGN="right"><INPUT TYPE="button" VALUE="Click Here"></TD></TR>
<TR><TD COLSPAN=2><HR></TD></TR>
<TR><TD COLSPAN=2>Window Resize Coordinates:</TD></TR>
<TR><TD ALIGN="right">clientX, clientY:</TD><TD><INPUT TYPE="text"
NAME="resizeCoords" SIZE=10></TD></TR>
</TABLE>
</FORM>
<DIV ID="display" STYLE="position:relative; left:100">
<IMG SRC="nile.gif" WIDTH=320 HEIGHT=240" BORDER=0>
</DIV>
</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>
<B>Capture, Release, and Routing of Event.CLICK</B>
<HR>
<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<P>
<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
<HR>
<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<BR><P><INPUT TYPE="button" VALUE="Button "layerButton1""
NAME="layerButton1"
onClick="alert("Event finally reached Button:" + this.name)"></P>
<P><INPUT TYPE="button" VALUE="Button "layerButton2""
NAME="layerButton2"
onClick="alert("Event finally reached Button:" + this.name)"></P>
</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>
<B>Basic document-level capture of Event.CLICK</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture
<HR>
<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>
<BR><P><INPUT TYPE="button" VALUE="Button "layerButton1""
NAME="layerButton1"
onClick="alert("Event finally reached Button:" + this.name)"></P>
<P><INPUT TYPE="button" VALUE="Button "layerButton2""
NAME="layerButton2"
onClick="alert("Event finally reached Button:" + this.name)"></P>
</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>
<B>Redirecting Event.CLICK</B>
<HR>
<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"<P>
<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>
<HR>
<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<BR><P><INPUT TYPE="button" VALUE="Button "layerButton1""
NAME="layerButton1"
onClick="alert("Event finally reached Button:" + this.name)"></P>
<P><INPUT TYPE="button" VALUE="Button "layerButton2""
NAME="layerButton2"
onClick="alert("Event finally reached Button:" + this.name)"></P>
</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()">
<H1>W3C DOM Event Propagation</H1>
<HR>
<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()">
<H1>W3C DOM Event Propagation</H1>
<HR>
<FORM>
<INPUT TYPE="checkbox" NAME="stopAllProp">Stop all propagation at FORM<BR>
<INPUT TYPE="checkbox" NAME="stopDuringBubble">Prevent bubbling past FORM
<HR>
<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>
<center>
<h1>Navigating with the History object</h1>
<form>
<input type="button" value="Back" onClick="window.history.back()">
<input type="button" value="Forward" onClick="window.history.forward()">
</form>
</center>
</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()">
<H1>srcElement Property</H1>
<HR>
<P>One event handler...</P>
<UL>
<LI>A
<LI>BB
<LI>CCC
<LI>DDDD
</UL>
<P>
Text Text <span class="bold">Text</span> Text Text Text Text
</P>
</BODY>
</HTML>

</source>

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)

JavaScript DHTML/Window Browser/Browser Event - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия