JavaScript Tutorial/Event/Target — различия между версиями
(нет различий)
|
Версия 21:52, 25 мая 2010
Содержание
Event Bubbling Demonstration
<source lang="javascript">
<html onclick="alert("Event is now at the HTML element.")"> <head> <title>Event Bubbles</title> <script type="text/javascript"> function init() {
window.onclick = winEvent document.onclick = docEvent; document.body.onclick = docBodEvent;
} function winEvent() {
alert("window object level.");
} function docEvent() {
alert("document object level.");
} function docBodEvent() {
alert("BODY element.");
} </script> </head> <body onload="init()"> <form onclick="alert("FORM")"> <input type="button" value="Button "main1"" name="main1" onclick="alert("Button: " + this.name)" /> </form> </body> </html></source>
Get key event target element id
<source lang="javascript">
<html> <head> <title>Key Events Example</title> <script type="text/javascript"> function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n>" + oEvent.type;
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;
} </script> </head> <body>
Type some characters into the first textbox.
<textarea id="txtInput" rows="15" cols="50" onkeypress="handleEvent(event)"></textarea>
<textarea id="txt1" rows="15" cols="50"></textarea>
</body> </html></source>
Get mouse event target
<source lang="javascript">
<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;
}
</script> </head> <body>
Use your mouse to click and double click the red square.
<textarea id="txt1" rows="15" cols="50"></textarea>
</body> </html></source>
W3C Event Capture and Bubble
<source lang="javascript">
<html> <head> <title>W3C DOM Event Propagation</title> <script type="text/javascript"> function init() {
window.onclick = winEvent;
document.onclick = docEvent;
document.body.onclick = docBodEvent;
document.addEventListener("click", docEvent, true);
document.forms[0].addEventListener("click", formCaptureEvent, true);
document.forms[0].addEventListener("click", formBubbleEvent, false);
} function winEvent(evt) {
alert("window object level (" + getPhase(evt) + ").");
} function docEvent(evt) {
alert("Document level (" + getPhase(evt) + ").");
} function docBodEvent(evt) {
alert("BODY level (" + getPhase(evt) + ").");
} function formCaptureEvent(evt) {
alert("FORM only on CAPTURE.");
} function formBubbleEvent(evt) {
alert("FORM only on BUBBLE.");
} 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()"> <form> <input type="button" value="Button "main1"" name="main1" onclick="alert("button (" + getPhase(event) + ").")" /> </form> </body> </html></source>
