Обработка событий в JavaScript - это, пожалуй, самое "вкусное блюдо", т.к. именно обработка событий выдает ответную реакцию на действия пользователей.
События в JS разделяются на системные: загрузка (load) и выгрузка (unload) страницы, события мыши (click, mouseover и т.д.), mousemove и события клавиатуры (keypress, keydown, keyup).
Сегодня сосредоточимся на событиях мыши.
События мыши
К событиям мыши относятся:
- click - клик;
- dblclick - двойной клик;
- mouseover - наведение курсора мыши на элемент;
- mousemove - перемещение курсора мыши над элементом;
- mouseout - уведение курсора мыши с элемента;
- mousedown - нажатие левой кнопки мыши;
- mouseup - отпускание левой кнопки мыши;
- contextmenu - нажатие правой кнопки мыши и вывод контекстного меню.
Для того чтобы написать ответную реакцию на событие, создают обработчик события (event handler), который, как правило, представляет собой функцию.
Назначить обработчик события можно несколькими способами:
- в виде атрибута элемента;
- в виде безымянной функции;
- в виде именованной функции;
- с помощью метода addEventListener().
Рассмотрим все способы.
Обработчик события как атрибут элемента
Это самый старый способ назначения обработчиков события и наименее используемый на данный момент. Для того чтобы его добавить, необходимо к имени события добавить приставку "on" и записать примерно такой код:
| 1 | <button onclick='alert("Событие произошло!")'>Нажми меня</button> |
Можно вызвать функцию, в которую можно передать один или несколько аргументов:
| 1 2 3 4 5 6 7 8 9 | <script> function change(element, color){ element.style.backgroundColor = color; } </script> <p onclick="change(this, 'red')">Кликни здесь, и этот абзац станет красным. Но только один раз.</p> <p onclick="change(this, 'lime')">Кликни здесь, и этот абзац станет зеленым. Но только один раз.</p> |
Пример этого кода:
Кликни здесь, и этот абзац станет красным. Но только один раз.
Кликни здесь, и этот абзац станет зеленым. Но только один раз.
Недостатком этого способа является то, что, если добавлять обработчики событий нужно к большому количеству элементов, то, во-первых, легко допустить ошибку в каком-нибудь из них, а во-вторых, при изменении кода сделать это придется долго. И опять-таки можно допустить ошибку.
Использовать этот способ нужно в учебных целях поначалу, а также тогда, когда это самый простой способ или нужно очень быстро добавить обработчик события к 1 элементу.
Обработчик события в виде безымянной функции
Используется при назначении обработчиков событий для большого количества элементов. К имени события, как в предыдущем варианте, добавляется приставка "on". В примере ниже приведен код для элементов списка с id="rules". При клике на каждый из них цифра меняется на маркер в виде галочки. Для того чтобы назначить обработчик события, мы используем цикл for:
| 1 2 3 4 5 6 | var li = document.querySelectorAll("#rules li"); for(let i = 0, len = li.length; i<len; i++){ li[i].onclick = function (){ this.style.listStyleImage = "url(markers/ok.png)"; } } |
И сам пример:
- Купить или сшить бальное платье
- Сделать прическу и макияж
- Научиться танцевать вальс
- Выучить все правила этикета
Для королевского бала необходимо:
В инспекторе свойств (Firefox на скриншотах ниже) можно увидеть, что к каждому элементу списка добавилась кнопка с буквами ev (от англ. event - событие):
Если нажать на эту кнопку, то можно увидеть, какой обработчик события назначен для данного элемента и посмотреть сам код обработчика события:
Обработчик события в виде именованной функции
Обработчик события назначается аналогично предыдущему случаю, но после знака присваивания записывается имя функции, а не сам ее код. Плюс этого способа заключается в том, что одну и ту же функцию можно назначить для разных html-элементов.
В примере ниже клик на крестике в правом верхнем углу одного блока (.block) и на изображении внутри другого блока (.round) приведет к удалению этих блоков. Выполняется это с помощью одной и той же функции:
| 1 2 3 4 5 6 7 8 9 | var img = document.querySelector(".round img"), close = document.getElementById("close"); function removeBlock() { this.parentNode.remove(); console.log(this.parentNode) } close.onclick = removeBlock; img.onclick = removeBlock; |
console.log() в этом коде выведет в консоль браузера, какой из блоков был удален.
Сам пример:
Обратите внимание, что в коде выше при вызове функции круглые скобки не нужны.
Отмена обработчика события
Для того чтобы отменить обработку события, вместо функции записывают после знака присваивания null:
| 1 | close.onclick = null; |
Использование метода addEventListener()
Самый используемый в последнее время, т.к. позволяет назначить несколько обработчиков одного и того же события. В его синтаксисе не нужно использовать приставку "on", только название самого события:
| 1 2 3 | элемент.addEventListener( "событие", имя_функции, фаза); Например, close.addEventListener( "click", removeBlock, false); |
Под параметром "фаза" подразумевается фаза прохождения события - всплытие или перехват (почитать подробнее). Поскольку, большинство событий обрабатывают на фазе всплытия, последний параметр будет равен false. А поскольку именно таково его значение по умолчанию, то его просто не указывают:
| 1 | close.addEventListener( "click", removeBlock); |
Отмена слушателя события
Чтобы отменить назначенный таким образом обработчик события, используют метод removeEventListener(), указывая в скобках и тип события, и функцию, которая вызывалась по нему.
| 1 | close.removeEventListener( "click", removeBlock); |
В примере ниже при клике на изображении оно сменяется на другое. Пути к изображениям берутся из массива pics:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="test"> <div class="round"><img src="twenty-twenty-150x150.jpg" alt="Image" id="img"></div> </div> <script> var pics = ["FitText-150x150.jpg", "jQuery-Knob-150x150.jpg", "unislider-150x150.jpg"]; var img = document.getElementById("img"), num = 0; img.addEventListener("click", changeImg); function changeImg(){ num<pics.length-1 ? num++ : num=0; img.src = pics[num]; } </script> |
Пример "вживую":
Еще один пример обработки событий с помощью метода addEventListener() вы найдете в статье "Обработка события onmousemove на примере поздравительной открытки".
Важной особенностью отмены слушателя события является то, что отменить можно только тот слушатель события, который имеет именованную функцию для обработки события. если такая функция будет безымянной, то отмены обработчика события не произойдет.
Ниже вы найдете пример, в котором использовано несколько обработчиков событий, заданных разными способами.
See the Pen JavaScript Events by Elen (@ambassador) on CodePen.
Если вы изучаете не только нативный JavaScript, но и библиотеку jQuery, то в статье "Обработка событий в jQuery" вы можете найти несколько способов добавления и удаления обработчиков событий.
А можно еще поподробней о событиях?
И с большим количеством примеров?
На сайте появилось много статей по обработке разных событий - onclick, onchange, onmouseover и onmouseout, onmousemove, onkeydown, onkeypress, onkeyup
Вы также можете следить за новыми статьями на странице "Виды событий в JavaScript", т.к. при появлении новой статьи там обязательно будет добавлена ссылка.