betacode

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

  1. WheelEvent

1. WheelEvent

WheelEvent это интерфейс представляющий происходящие события, когда пользователь двигает колесо мыши (mouse wheel) или подобного устройства.
Браузеры поддерживающие WheelEvent:
WheelEvent это подинтерфейс MouseEvent, который унаследует все свойства (property) и методы родительского интерфейса.
  • 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";

}

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

Show More

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

Show More