JavaScript DHTML/Window Browser/Browser Event — различия между версиями

Текущая версия на 07:28, 26 мая 2010

Содержание

1 Cancelling and Redirecting Events in IE5.5+
2 Cancelling and Redirecting Events in NN6+
3 Document and Layer Event Capture and Release
4 Event Bubbling Demonstration
5 Handling onBlur and onFocus in Frames
6 IE4+ Event Coordinate Properties
7 NN4 Capture, Release, and Route Events
8 NN4 Event Capture and Release 1
9 NN4 Redirecting Events
10 NN6 Event Capture and Bubble
11 Preventing Bubble and Capture
12 Using the History Object to Navigate
13 Using the srcElement property

Cancelling and Redirecting Events in IE5.5+

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

Cancelling and Redirecting Events in NN6+

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

Document and Layer Event Capture and Release

/*
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> 
&nbsp;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>

Event Bubbling Demonstration

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

Handling onBlur and onFocus in Frames

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

IE4+ Event Coordinate Properties

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

NN4 Capture, Release, and Route Events

/*
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&nbsp;
<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&nbsp;
<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> 
&nbsp;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>

NN4 Event Capture and Release 1

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

NN4 Redirecting Events

/*
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&nbsp;
<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&nbsp;
<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> 
&nbsp;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>

NN6 Event Capture and Bubble

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

Preventing Bubble and Capture

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

Using the History Object to Navigate

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

Using the srcElement property

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

JavaScript DHTML/Window Browser/Browser Event — различия между версиями

Текущая версия на 07:28, 26 мая 2010

Содержание

Cancelling and Redirecting Events in IE5.5+

Cancelling and Redirecting Events in NN6+

Document and Layer Event Capture and Release

Event Bubbling Demonstration

Handling onBlur and onFocus in Frames

IE4+ Event Coordinate Properties

NN4 Capture, Release, and Route Events

NN4 Event Capture and Release 1

NN4 Redirecting Events

NN6 Event Capture and Bubble

Preventing Bubble and Capture

Using the History Object to Navigate

Using the srcElement property

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:28, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 07:28, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)