Zdarzenia#
Typ wheel#
| Typ: | wheel |
|---|---|
| Interfejs: | WheelEvent |
| Sync / Async: | Async |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Tak |
| Domyślna akcja | Przewijanie lub powiększanie dokumentu |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu wheel musi zostać wysłane przez aplikację kliencką w chwili, kiedy kółko urządzenia wskazującego zostało obrócone wokół dowolnej osi, lub kiedy równoważne urządzenie wejściowe (np. trackball, niektóre tablety lub touchpady, itp.) emulują takie zachowanie. W zależności od platformy i urządzenia wejściowego ukośne delty kółka mogą być wysyłane zarówno jako pojedyncze zdarzenie wheel z wieloma niezerowymi osiami lub jako osobne zdarzenia wheel dla każdej niezerowej osi.
Typową domyślną akcją dla zdarzenia typu wheel jest przewijanie (lub w niektórych przypadkach powiększanie) dokumentu o zadaną wartość. Jeśli zdarzenie zostanie anulowane to implementacje nie mogą przewijać lub powiększać dokumentu (lub wykonywać wszelkich innych zależnych od implementacji domyślnych akcji, które są skojarzone z tym zdarzeniem).
W niektórych aplikacjach klienckich lub urządzeniach wejściowych prędkość z jaką kółko zostało obrócone może mieć wpływ na wartości delta, tak że większe prędkości będą generowały większe delty.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input {vertical-align: top;}
input:hover {outline: 3px solid green;}
#box {width: 200px; height: 200px; margin-bottom: 5px; overflow:auto; display: inline-block;}
#box div {height: 2000px; background-color: #a08080;}
</style>
</head>
<body>
<p>Obracaj kółko myszy w obrębie poniższych elementów by odczytać poszczególne cechy zdarzenia.</p>
<div id="box">
<div></div>
</div>
<input size="40" type="text" value="Jakiś początkowy tekst">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var box = document.getElementById("box");
var input = document.getElementsByTagName("input")[0];
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.relatedTarget: " + e.relatedTarget
+ "<br>" + "e.deltaX: " + e.deltaX
+ "<br>" + "e.deltaY: " + e.deltaY
+ "<br>" + "e.deltaZ: " + e.deltaZ
+ "<br>" + "e.deltaMode: " + e.deltaMode
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = data + info.innerHTML;
}
box.addEventListener("wheel", readInfo, false);
input.addEventListener("wheel", readInfo, false);
</script>
</body>
</html>