JavaScript DHTML/Event/Event Properties

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

"cancelBubble" Example

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> function function1() { 

   if (window.event.shiftKey){
       window.event.cancelBubble = true;
   }
   alert(window.event.cancelBubble);

} </script></head> <body> <button onclick="function1();"> Click here while pressing the Shift key </button> </body> </html> 


 </source>


"contentOverflow" Example

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> function function1() { 

   alert("contentOverflow: "+ event.contentOverflow);

} </script> <body bottommargin=100 onLoad="function1()"> </body> </html> 


 </source>


Event from Element

   <source lang="html4strict">

<html> <head> <script> 

   function function1() {
       alert(event.fromElement.innerText);
   }

</script> </head>

<body>
CELL 1
CELL 2
CELL 3

</body> </html> 


 </source>


Event "layerX"

   <source lang="html4strict">

<html> <body> <script> function function1(myEvent) { 

  document.getElementById("myX").innerHTML = myEvent.layerX;
  document.getElementById("myY").innerHTML = myEvent.layerY;

} document.onmousemove = function1; </script>

Layer X Coordinate: 0

Layer Y Coordinate: 0

<button onclick="alert(event.type);">Event Type</button> </body> </html> 


 </source>


Event "layerY"

   <source lang="html4strict">

<html> <body> <script> function function1(myEvent) { 

  document.getElementById("myX").innerHTML = myEvent.layerX;
  document.getElementById("myY").innerHTML = myEvent.layerY;

} document.onmousemove = function1; </script>

Layer X Coordinate: 0

Layer Y Coordinate: 0

<button onclick="alert(event.type);">Event Type</button> </body> </html> 


 </source>


Event nextPage

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> function function1() { 

   var m = event.nextPage;
   alert(m);

} </script> </head> <body bottommargin="150"> 

   <input type="Button" id="myB" value="Click here" onClick="function1();">

</body> </html> 


 </source>


Event offsetY and offsetY

   <source lang="html4strict">

<script language="JavaScript"> function function1() { 

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth;

} function function1() { 

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop;

} </script>

X Coordinate: 0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0 


 </source>


Event pageY and pageX

   <source lang="html4strict">

<html> <body> <script> function function1(myEvent) { 

  document.getElementById("myX").innerHTML = myEvent.pageX;
  document.getElementById("myY").innerHTML = myEvent.pageY;

} document.onmousemove = function1; </script>

Page X Coordinate: 0

Page Y Coordinate: 0

</body> </html> 


 </source>


Event "propertyName"

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> 

   function function1(){
       alert(event.propertyName);
   }

</script> <button onclick="this.style.color="white"; this.style.backgroundColor="red";" 

       onpropertychange="function1();">propertyName

</button> </body> </html> 


 </source>


Event qualifier

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> 

   function function1() {
       var m = window.event.qualifier; 
       alert(m);
   }

</script> <a datasrc="#myData" datafld="column1" dataformatas="html" target="_blank"> data link </a> <object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData"> 

   <param name="DataURL" value="myfile.csv">
   <param name="UseHeader" value="True">
   <param name="TextQualifier" value=""">

</object> <input type="button" value="Get qualifier" onclick="function1();"> </body> </html> 


 </source>


Event repeat

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> function keyStatus() { 

   x = event.repeat; 
   if (x == true) {
       alert("A key has been hold down");
   }

} </script> <a id="myL" 

  href="http://www.wbex.ru/" 
  target="_blank" 
  onKeyDown="keyStatus();">wbex.ru Network

</a> </body> </html> 


 </source>


Event return Value

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> 

   function function1() {
       event.returnValue = false;
   }

</script> <a href="http://www.wbex.ru" 

  target="_blank" 
  onClick="function1();">wbex.ru Home page</a>
   
     
       
 </source>


Event saveType

   <source lang="html4strict">

<html xmlns:yourNs><head> <style> @media all { IE\:homePage {behavior:url(http://www.wbex.ru)}} </style> <script language="JavaScript"> function goHomePage(){ 

   wbex.navigateHomePage();
   event.returnValue=false;

} function function1() { 

   var m = event.saveType; 
   alert(m);

} </script> </head> <body> <yourNs:homepage id="wbex"/> <public:attach event="oncontentsave" onevent="cbCopy()" for = myA/> <a id="secL" href="" onClick="goHomePage();">Navigate to your home page</a> <input type="button" value="Content type" onclick="function1();"> </body> </html> 


 </source>


Event screenX

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> function function2() { 

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth;

} function function1() { 

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop;

} </script>

X Coordinate: 0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0

</body> </html> 


 </source>


Event screenY, screenX

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> function function2() { 

   myX.innerHTML = window.event.offsetX;
   myY.innerHTML = window.event.offsetY;
   mySX.innerHTML = window.event.screenX;
   mySY.innerHTML = window.event.screenY;
   mySH.innerHTML = myDiv.scrollHeight;
   mySW.innerHTML = myDiv.scrollWidth;

} function function1() { 

   mySL.innerHTML = myDiv.scrollLeft;
   myST.innerHTML = myDiv.scrollTop;

} </script>

X Coordinate: 0

Y Coordinate: 0

Screen X: 0

Screen Y: 0

Scroll Height: 0

Scroll Width: 0

Scroll Left: 0

Scroll Top: 0

</body> </html> 


 </source>


Event source element

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> 

   function function1() {
       alert(window.event.srcElement.id);
   }

</script> <body id="myBody" onclick="function1();"> <button id="myButton1" onclick="function1();">Button One</button> <button id="myButton2" onclick="function1();">Button Two</button> </body> </body> </html> 


 </source>


Event "srcUrn" Example

   <source lang="html4strict">

<html> <body> <style> @media all {IE\:homePage {behavior:url(#default#homepage)}} </style> <script language="JavaScript"> function goHomePage(){ 

   HP.navigateHomePage();
   event.returnValue=false;

} </script> <script language="JavaScript" for="myA" event="onmouseout"> var m = event.srcUrn; alert("The value of property srcUrn is: "+m); </script> <yourNs:homepage id="HP"/> <a id="myA" href="" onClick="goHomePage();">Navigate to your home page</a> </body> </html> 


 </source>


Event "target" Example

   <source lang="html4strict">

<html> <body> <script> function function1(myEvent) { 

  document.getElementById("myX").innerHTML = myEvent.layerX;
  document.getElementById("myY").innerHTML = myEvent.layerY;

} document.onmousemove = function1; </script>

Layer X Coordinate: 0

Layer Y Coordinate: 0

<button onclick="alert(event.type);">Event Type</button> </body> </html> 


 </source>


Event to Element

   <source lang="html4strict">

<html> <head> <script> 

   function alertMe() {
       alert(event.toElement.innerText);
   }

</script> </head> <body>

CELL 1
CELL 2
CELL 3

</body> </html> 


 </source>


Event type

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> 

   function function1(){
       var m = window.event.type; 
       alert(m)
   }

</script></head> <body> <input type="button" value="type = "button"" onClick="function1();"> </body> </html> 


 </source>


Event y and x Property

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> function function1() { 

   myX.innerHTML = window.event.x;
   myY.innerHTML = window.event.y;

} </script>

X Coordinate: 0

Y Coordinate: 0

www.wbex.ru

</body> </html> 


 </source>


Get event Phase: CAPTURING,BUBBLING

   <source lang="html4strict">

<html> <head> <title>W3C DOM Event Propagation</title> <script type="text/javascript">

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Event/Event_Properties&oldid=2123»