Статьи

Все события мыши в JavaScript

Ноябрь 26, 2018

Спецификация HTML 5 полна определений новых событий, но она собирает их в длинный список, разделенный только на категорию поддержки: некоторые должны поддерживаться всеми элементами, некоторые — окном и производными, и так далее.

К сожалению, этот стиль смешивает много разных видов событий, таких как мультимедийные (canplay) и основанные на клавиатуре (keyup). В этой статье я собрал все события, которые можно генерировать с помощью мыши.

В HTML 4

Есть несколько хорошо поддерживаемых событий, перенесенных предыдущей версией спецификации. Все ожидают, что браузер правильно запустит эти события:

  • клик : самое простое событие.
  • dblclick : двойной щелчок по элементу HTML.
  • mousedown : срабатывает при нажатии кнопки.
  • mouseup : срабатывает при отпускании кнопки.
  • mouseover : срабатывает, когда курсор проходит над элементом HTML.
  • mouseout : срабатывает, когда курсор покидает область отображения HTML-элемента; инверсия наведения мыши.
  • mousemove : срабатывает каждый раз, когда курсор перемещается на один пиксель. Навести браузер очень просто, настроив таргетинг на это событие.

В любом случае, window.addEventListener и element.addEventListener (где element является ссылкой на элемент DOM) являются функциями, вызываемыми для установки обработчиков событий.

Вы также можете использовать HTML-атрибут или свойство on $ eventName (например, onclick, onmouseover), но addEventListener более гибок, поскольку позволяет множеству разных слушателей работать над одним и тем же событием, без одного молча заменяя другое.

HTML 5: перетаскивание

Большинство новых событий мыши (но не обязательно самые интересные) имеют дело с поддержкой перетаскивания:

  • drag : часто запускается для перетаскиваемого элемента (который должен определять атрибут * draggable *.)
  • dragstart : срабатывает, когда мышь удерживается на элементе и начинается движение.
  • dragend : срабатывает при отпускании элемента.
  • dragenter : срабатывает, когда элемент входит в отображаемую область другого.
  • dragleave : срабатывает, когда элемент покидает отображаемую область, как инверсия dragenter.
  • dragover : часто срабатывает, когда элемент находится над другим.
  • drop : срабатывает, когда элемент выпущен поверх другого.

сопротивление , dragstart и dragend обжигаются на перемещенного элемента, в то время как DragEnter , DragLeave , DragOver и падение обжигаются на целевой один. Вот отдельный пример их использования:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.onload = function() {
        var box1 = document.getElementById('box1');
        box1.addEventListener('dragstart', function(e) { console.log('Dragging #box1'); });
        box1.addEventListener('dragend', function(e) { console.log('Dragging ended'); });
        var box2 = document.getElementById('box2');
        box2.addEventListener('dragenter', function(e) { console.log('Entered into #box2'); });
        box2.addEventListener('dragleave', function(e) { console.log('Leaving #box2'); });
    }
</script>
</head>
<body>
<div draggable="true" id="box1" style="width: 100px; height: 100px; background-color: navy;"> </div>
<div id="box2" style="width: 100px; height: 100px; background-color: green;"> </div>
</body>
</html>

Одним из распространенных применений Drag and Drop API является интеграция с File API, позволяющая загружать файлы путем перетаскивания в окно браузера.

HTML 5: колесо

MouseWheel событие вызывается при использовании колеса над элементом или окном. Вот пример, который увеличивает или уменьшает элемент HTML, изменяя его размер:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.onload = function() {
        var box = document.getElementById('box');
        var width = 100;
        var height = 100;
        box.addEventListener('mousewheel', function(e) {
            console.log(e.wheelDelta);
            if (e.wheelDelta > 0) {
                width += 20;
                height += 20;
            } else if (e.wheelDelta < 0) {
                if (width > 20) {
                    width -= 20;
                    height -= 20;
                }
            }
            box.style.width = width + "px";
            box.style.height = height + "px";
        });
    }
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: navy;"> </div>
</body>
</html>

Прокрутки событие вместо этого работает на более высоком уровне абстракции: это на самом деле не мыши конкретное событие, так как это может быть сгенерировано с помощью мыши , но и нажатия клавиши прокрутки. Что модели событий — это изменение в видимой части элемента, созданное движением в вертикальной или горизонтальной полосах прокрутки:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.onload = function() {
        var box = document.getElementById('box');
        box.addEventListener('scroll', function(e) {
            console.log(e.target.scrollTop + " of " + e.target.scrollHeight);
            // same with scrollLeft and scrollWidth
        });
    }
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; overflow:scroll;">Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... Lorem ipsum dolor amet... </div>
</body>
</html>

 

HTML 5: щелкните правой кнопкой мыши

ContextMenu событие обстреляно правая кнопка мыши, который открывает контекстное меню , сосредоточенное на указателе мыши. Вот пример перехвата:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.onload = function() {
        var box = document.getElementById('box');
        box.addEventListener('contextmenu', function(e) {
            console.log(e);
        });
    }
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: navy;"> </div>
</body>
</html>

Если вы хотите отобразить альтернативное контекстное меню, вы также можете отменить событие; однако многие браузеры позволяют пользователю отменять эти манипуляции и всегда отображать оригинальное меню (например, веб-сайты, скрывающие запись «Просмотр источника»).

38
Share: