Inhaltsverzeichnis

Die Anleitung zu Javascript WheelEvent

1- WheelEvent

WheelEvent ist eine Interface für die Vertretung der Events, die passieren wenn der Benutzer das Mausrad (mouse wheel) oder die ähnlichen Geräte bewegt.
Die Browser unterstützt  WheelEvent:
WheelEventist die Sub-Interface von  MouseEvent. Es wird alle Properties und Methode von Vater-Method geerbt.
  • TODO Link!
  • TODO Link!
Event Die Bezeichnung
wheel Das Event passiert wenn das Mausrad (mouse wheel) auf ein Element heranrollt oder herunterrollt.
Die Properties (property) vom  WheelEvent:
Property Die Bezeichnung
deltaX Die Anzahl der horizontalen Rollen des Mausrad (mouse wheel) (die Achse X) zurückgeben
deltaY Die Anzahl der vertikalen Rollen des Mausrad (mouse wheel) (die Achse Y) zurückgeben
deltaZ Die Anzahl der Rollen nach der Achse  Z des Mausrad zurückgeben
deltaMode Ein Zahl zurückgeben, die die Messungeinheit für die Wert delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE) vertritt.
Die Konstante:
Die Konstante Die Wert
Die Bezeichnung
DOM_DELTA_PIXEL 0 Die Messungseinheit von delta ist pixels.
DOM_DELTA_LINE 1
Die Messungseinheit von delta list lines.
DOM_DELTA_PAGE 2 Die Messungseinheit von delta ist pages.
Zum Beispiel  WheelEvent:
wheelevents-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>WheelEvent Example</title>

      <script src="wheelevents-example.js"></script>

   </head>
   <body>

      <h3>WheelEvent example</h3>

      <div style="font-size:12px; padding:5px; border:1px solid #ccc;"
            onwheel="wheelHandler(event)">
            Hello Everyone!
      <div>

   </body>
</html>
 
wheelevents-example.js
function wheelHandler(evt)  {

   var fontSize = evt.target.style.fontSize;// 12px, 13px,...

   var value = Number(fontSize.substr(0, fontSize.length-2)); // 12, 13,..

   // Scrolling up
   if (evt.deltaY < 0) {
       if(value < 50)  {
         value++;
       }
   }

   // Scrolling down
   if(evt.deltaY > 0)  {
      if(value > 5)  {
         value--;
      }
   }
   
   evt.target.style.fontSize = value+"px";

}