JavaScript Tutorial/Event/Event Handler
Содержание
- 1 Add event handler listener to document
- 2 Add event listener to elements in a form
- 3 Add event listener to form
- 4 Bubble up events (Firefox)
- 5 Capturing events
- 6 Event Bubbling (Firefox)
- 7 Event Handlers and this
- 8 Inline DOM Event Registration
- 9 Preventing Bubble and Capture
- 10 Register mouse down event(IE)
Add event handler listener to document
<source lang="javascript">
<html> <head> <title>W3C DOM Event Propagation</title> <script type="text/javascript"> function init() {
document.addEventListener("click", docEvent, true);
} function docEvent(evt) {
alert("Document level.");
} </script> </head> <body onload="init()"> </body> </html></source>
Add event listener to elements in a form
<source lang="javascript">
<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>
Add event listener to form
<source lang="javascript">
<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>
Bubble up events (Firefox)
<source lang="javascript">
<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>
Capturing events
<source lang="javascript">
<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>
Event Bubbling (Firefox)
<source lang="javascript">
<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 Handlers and this
<source lang="javascript">
<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>
Inline DOM Event Registration
<source lang="javascript">
<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>
Preventing Bubble and Capture
<source lang="javascript">
<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>
Register mouse down event(IE)
<source lang="javascript">
<html> <head> <title>X/Y Marks the Spot</title> <script type="text/javascript"> function mouseDown() {
var locString = "X = " + window.event.screenX + " Y = " + window.event.screenY; document.write(locString);
} document.onmousedown=mouseDown; </script> </head> <body> </body> </html></source>