Inhaltsverzeichnis
Die Anleitung zu Javascript WheelEvent
View more Tutorials:


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.

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";
}