JavaScript DHTML/Event/General Event
Содержание
- 1 Add event handler to form
- 2 addEventListener or attachEvent
- 3 Add event listener to anchor link
- 4 An Example of Changing Event Handlers
- 5 Bubble up events (Firefox)
- 6 Calling a Function from an Event Handler
- 7 Capturing events
- 8 Emulating Events
- 9 Event Bubbling Demonstration
- 10 Event Bubbling (Firefox)
- 11 Event filer: number Only, upper case
- 12 Event Handlers and this
- 13 Event type occured
- 14 Get Positioned Event Coordinate
- 15 Inline DOM Event Registration
- 16 JavaScript Event Handlers
- 17 Customer Information
- 18 Preventing Bubble and Capture
- 19 Setting Event Handlers from within JavaScript
- 20 W3C Event Capture and Bubble
Add event handler to form
<source lang="html4strict">
<html> <head> <title>W3C DOM Event Propagation</title> <script type="text/javascript"> function init() {
document.forms[0].addEventListener("click", formBubbleEvent, false);
} 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>
addEventListener or attachEvent
<source lang="html4strict">
<html> <head> <title>Options</title> <script type="text/javascript"> function openwin(e) {
if (typeof window.open != "undefined") {
var opened = window.open("http://www.google.ru","","width=240,height=480");
if (typeof e.preventDefault != "undefined") {
e.preventDefault();
e.stopPropagation();
}
e.cancelBubble = true;
return false;
} else {
return true;
}
} </script> </head> <body> <a href="#" id="my">Go?</a> <script type = "text/javascript"> var mslink = document.getElementById("my"); if (window.addEventListener) {
mslink.addEventListener("click",openwin,false);
} else {
mslink.attachEvent("onclick",openwin);
} </script> </body> </html>
</source>
Add event listener to anchor link
<source lang="html4strict">
<html> <head> <title>Onclick</title> <script type="text/javascript"> function handleclick() {
document.write("Clicked");
return false;
} </script> </head> <body>
<a id="link1" href="#">Click Here</a>
<script type = "text/javascript" > var link1 = document.getElementById("link1"); if (typeof window.addEventListener != "undefined") {
link1.addEventListener("click",handleclick,false);
} else {
link1.attachEvent("onclick",handleclick);
} </script> </body> </html>
</source>
An Example of Changing Event Handlers
<source lang="html4strict">
<html> <head> <script language="JavaScript"> var choice = "A"
function optionA() {
alert("optionA" );
}
function optionB() {
alert("optionB" );
}
</script> </head> <body>
<form name="form1"> <input type="button" name="button1" onClick="optionA()"> </form> <script language="JavaScript">
if (choice != "A") {
document.form1.button1.onclick=optionB
}
</script> </body> </html>
</source>
Bubble up events (Firefox)
<source lang="html4strict">
<html> <head> <title></title> <script type="text/javascript"> function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
return true;
} function setup(evnt) {
document.addEventListener("click",writeX,false);
document.forms[0].addEventListener("click",writeX,false);
document.forms[0].elements[0].addEventListener("click",writeX,false);
} setup(); </script> <body> <form>
<input type="submit" value="Submit" />
</form> </body> </html>
</source>
Calling a Function from an Event Handler
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function showMsg(msg) {
document.write("The button sent: " + msg);
} </script> </head> <body> <form> <input type="button" value="Click Me" onclick="showMsg("The button has been clicked!")"> </form> </body> </html>
</source>
Capturing events
<source lang="html4strict">
<html> <head> <title></title> <script type="text/javascript"> function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
return true;
} function setup(evnt) {
document.addEventListener("click",writeX,true);
document.forms[0].addEventListener("click",writeX,true);
document.forms[0].elements[0].addEventListener("click",writeX,true);
} setup(); </script> <body> <form>
<input type="submit" value="Submit" />
</form> </body> </html>
</source>
Emulating Events
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Simulating Events</TITLE> <SCRIPT></SCRIPT> </HEAD> <BODY> <FORM NAME="test"> <INPUT TYPE="BUTTON" NAME="button1" VALUE="Button 1"
ONCLICK="button1Clicked()">
<INPUT TYPE="BUTTON" NAME="button2" VALUE="Button 2"
ONCLICK="button2Clicked()">
</FORM> </BODY> </HTML>
</source>
Event Bubbling Demonstration
<source lang="html4strict">
<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>
Event Bubbling (Firefox)
<source lang="html4strict">
<html> <head> <title>Event Bubbling</title> <script type="text/javascript"> function mouseDown(nsEvent) {
var theEvent = nsEvent ? nsEvent : window.event; var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY; var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement; document.write(locString + " " + theSrc);
} document.onmousedown=function (evnt) {
var theEvnt = evnt? evnt : window.event; document.write(theEvnt.type);
}
window.onload=function () {
document.getElementById("first").onmousedown=mouseDown;
document.getElementById("second").onmousedown=function () {
document.write("Second event handler");
}
} </script> </head> <body>
</body> </html>
</source>
Event filer: number Only, upper case
<source lang="html4strict">
function numberOnly(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (elem) {
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if ((charCode < 32 ) ||
(charCode > 44 && charCode < 47) ||
(charCode > 47 && charCode < 58)) {
return true;
} else {
return false;
}
}
}
}
function upperOnly() {
var charCode = event.keyCode;
if (charCode > 96 && charCode < 123) {
event.keyCode = charCode - 32;
}
}
</source>
Event Handlers and this
<source lang="html4strict">
<html> <head> <title></title> <script type="text/javascript"> window.onload=setObjects; function setObjects() {
document.personData.firstName.onblur=testValue;
} function testValue() {
document.write(this.value);
} </script> </head> <body> <form name="personData"> First Name: <input type="text" name="firstName" /> </form> </body> </html>
</source>
Event type occured
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function whichType(event){
alert(event.type)
} </script> </head> <body onmousedown="whichType(event)">
Click on the document.
</body> </html>
</source>
Get Positioned Event Coordinate
<source lang="html4strict">
function getPositionedEventCoords(evt) {
var elem = (evt.target) ? evt.target : evt.srcElement;
var coords = {left:0, top:0};
if (evt.layerX) {
var borders = {left:parseInt(getElementStyle("progressBar",
"borderLeftWidth", "border-left-width")),
top:parseInt(getElementStyle("progressBar",
"borderTopWidth", "border-top-width"))};
coords.left = evt.layerX - borders.left;
coords.top = evt.layerY - borders.top;
} else if (evt.offsetX) {
coords.left = evt.offsetX;
coords.top = evt.offsetY;
}
evt.cancelBubble = true;
return coords;
}
</source>
Inline DOM Event Registration
<source lang="html4strict">
<html> <head> <title>Inline DOM Event Registration</title> <script type="text/javascript"> function helloMsg() {
var helloString = "hello there"; document.write(helloString);
} function helloTwice() {
var helloString = "hi again"; document.write(helloString);
} window.onload=helloTwice; </script> </head> <body onload="helloMsg();"> </body> </html>
</source>
JavaScript Event Handlers
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> <a href="http://www.wbex.ru"
name="linker" onMouseOver="return updateStatusBar()" onMouseOut="return updateStatusBarOut()">www.wbex.ru</a>
</p> <form method="POST"> <input type=button name="ViewHat" value="View Hat" onClick=displayHat()></p> </form>
<form action="JavaScript:alert("order")"
method="POST"
name="MainForm"
onSubmit="return confirmOrder()">
Customer Information
First Name:
<input type=text size=20 maxlength=20 name="FirstName" onFocus="selectContents(this)">
Last Name:
<input type=text size=20 maxlength=20 name="LastName" onFocus="selectContents(this)">
Title:
<input type=text size=30 maxlength=30 name="Title" onFocus="selectContents(this)">
Company:
<input type=text size=30 maxlength=30 name="Company" onFocus="selectContents(this)">
Street Address:
<input type=text size=30 maxlength=30 name="StreetAddr" onFocus="selectContents(this)">
City:
<input type=text size=30 maxlength=30 name="City" onFocus="selectContents(this)">State:
<input type=text size=3 maxlength=2 name="State" onFocus="selectContents(this)" onChange="convertToUppercase(this)">
Zip Code:
<input type=text size=30 maxlength=10 name="ZipCode" onFocus="selectContents(this)">
Telephone:
<input type=text size=12 maxlength=12 name="Phone" onFocus="selectContents(this)">
FAX:
<input type=text size=12 maxlength=12 name="FAX" onFocus="selectContents(this)">
Email:
<input size=30 maxlength=50 name="Email" onFocus="selectContents(this)">
URL:
<input type=text size=30 maxlength=100 name="URL" onFocus="selectContents(this)">
<textarea name="worthyBox" rows=3 cols=49 onFocus="selectContents(this)"> </textarea></blockquote>
<input type=submit value="Order" onClick="confirmOrder("Submit object")"> <input type=reset value="Clear Form" onClick="alert("Clearing!")">
</form>
<a href="JavaScript:displayHat()"><img src="http://www.wbex.ru/style/logo.png" align=bottom border=0 width=50 height=50> </a>
</body> </html>
</source>
Preventing Bubble and Capture
<source lang="html4strict">
<html> <head> <title>W3C DOM Event Propagation</title> <script type="text/javascript"> function init() { document.body.onclick = docBodEvent; document.addEventListener("click", docEvent, true); document.forms[0].addEventListener("click", formCaptureEvent, true); document.forms[0].addEventListener("click", formBubbleEvent, false); } function docBodEvent(evt) { if (evt.target.type == "button") { alert("BODY"); } } 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(); } } } </script> </head> <body onload="init()"> <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("button")" /> </form> </body> </html>
</source>
Setting Event Handlers from within JavaScript
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Setting event handlers from within JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <FORM NAME="test"> <INPUT TYPE="BUTTON" NAME="clickMe" VALUE="Click Me!"><INPUT TYPE="TEXT" NAME="result" SIZE="20">
</FORM> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </BODY> </HTML>
</source>
W3C Event Capture and Bubble
<source lang="html4strict">
<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>
