JavaScript Tutorial/Event/Target

Материал из Web эксперт
Версия от 11:24, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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>