JavaScript Tutorial/Event/Event Handler

Материал из Web эксперт
Перейти к: навигация, поиск

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>