Руководство Javascript WheelEvent

WheelEvent

1. WheelEvent

WheelEvent это интерфейс представляющий происходящие события, когда пользователь двигает колесо мыши (mouse wheel) или подобного устройства.

Браузеры поддерживающие WheelEvent:

WheelEvent это подинтерфейс MouseEvent, который унаследует все свойства (property) и методы родительского интерфейса.

Руководство Javascript MouseEvent
Javascript UiEvent
Hướng dẫn và ví dụ Javascript Event

Событие	Описание
wheel	Событие происходит когда колесо мыши (mouse wheel) катится вверх или вниз над элементом.

Свойства (property) у WheelEvent:

Свойства	Описание
deltaX	Возвращает число горизонтальной прокрутки колеса мыши (mouse wheel) (Ось X)
deltaY	Возвращает число вертикальной прокрутки колеса мыши (mouse wheel) (Ось Y)
deltaZ	Возвращает количество прокрутки колеса мыши по оси Z.
deltaMode	Возвращает чило, представляющее единицу измерения для значений delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE)

Константы:

Константа	Значение	Описание
DOM_DELTA_PIXEL	0	Единица измерения delta это pixels.
DOM_DELTA_LINE	1	Единица измерения delta это lines.
DOM_DELTA_PAGE	2	Единица измерения delta это pages.

Пример с 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";

}

Руководство Javascript WheelEvent

1. WheelEvent

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript

Новейшие статьи