В JavaScript события являются наиболее используемой частью языка, т.к. именно события позволяют пользователю взаимодействовать с html-страницей. Виды событий разделяются на события мыши, клавиатуры, окон, фреймов, объектов, форм и элементов форм, а также события перетаскивания.
События мыши
Событие | Описание | Уровень DOM |
---|---|---|
onclick | Наступает при клике пользователя на элементе | 2 |
oncontextmenu | Наступает, когда пользователь делает клик правой кнопкой мыши на элементе, чтобы открыть контекстное меню | 3 |
ondblclick | Наступает при двойном клике пользователя на элементе | 2 |
onmousedown | Наступает при нажатии левой кнопки мыши на элементе | 2 |
onmouseup | Происходит, когда пользователь отпускает кнопку мыши над элементом | 2 |
onmouseenter | Наступает, когда указатель мыши перемещается на элемент | 2 |
onmouseleave | Событие происходит, когда указатель перемещается за пределы элемента | 2 |
onmousemove | Происходит, когда указатель мыши двигается над элементом | 2 |
onmouseover | Происходит, когда указатель мыши перемещается на элемент или на один из его дочерних элементов | 2 |
onmouseout | Событие происходит, когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов | 2 |
События клавиатуры
Событие | Описание | Уровень DOM |
---|---|---|
onkeydown | Событие происходит, когда пользователь нажимает клавишу | 2 |
onkeypress | Наступает, когда пользователь нажимает на клавишу, после события onkeydown, но до события onkeyup. Позволяет получить доступ только к символьным клавишам. | 2 |
onkeyup | происходит, когда пользователь отпускает клавишу | 2 |
Примечание: Событие onkeypress не срабатывает для всех клавиш (например, клавиши Alt, Ctrl, Shift, Esc) во всех браузерах. Чтобы определить, нажал ли пользователь соответствующую клавишу, необходимо использовать событие onkeydown вместо onkeypress, поскольку оно работает для всех клавиш.
Также нужно учитывать, что обработка этого события поддерживается для всех HTML-тегов, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
Посмотреть на то, какое событие клавиатуры в данный момент происходит и какие клавиши были нажаты, можно в примере ниже.
See the Pen Keyboard Events by Elen (@ambassador) on CodePen.
События окон/фреймов/объектов
Событие | Описание | Уровень DOM |
---|---|---|
onabort | Наступает, когда загрузка ресурса была прервана | 2 |
onbeforeunload | Происходит до того, как документ будет выгружен | 2 |
onerror | Наступает, когда во время загрузки внешнего файла происходит ошибка (например, неверно указан путь к файлу изображения) | 2 |
onhashchange | Событие происходит, когда произошли изменения в якорной части URL-адреса (http://somesite.com#about-us) | 3 |
onload | Происходит, когда объект загрузился. Обрабатывается для таких html-элементов, как <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> |
2 |
onunload | Событие происходит, когда страница выгружается (для элемента <body> ) |
2 |
onpageshow | Событие происходит, когда пользователь переходит на веб-страницу | 3 |
onpagehide | Происходит, когда пользователь покидает веб-страницу | 3 |
onresize | Происходит, когда размер видимой части документа изменяется (при изменении размеров окна браузера) | 2 |
onscroll | Событие происходит, когда элемент прокручивается (для элементов, у которых задана высота и ширина и overflow: auto или scroll, а также для body, iframe, textarea) | 2 |
События форм и элементов форм
Событие | Описание | Уровень DOM |
---|---|---|
onfocus | Наступает, когда элемент получает фокус, т.е. в него помещается курсор или выполнен переход клавишей Tab | 2 |
onfocusin | Событие происходит, когда элемент собирается получить фокус. Похоже на событие onfocus, которое не всплывает. Поэтому, если вы хотите узнать, получает ли фокус элемент или его ребенок, вы должны использовать событие onfocusout.Не поддерживается в FireFox. | 2 |
onfocusout | Происходит, когда элемент собирается терять фокус. Похоже на событие onblur, но onblur событие не всплывает. Поэтому, если вы хотите узнать, теряет ли фокус элемент или его ребенок, вы должны использовать событие onfocusout. Не поддерживается в FireFox. | 2 |
onblur | Событие возникает, когда элемент теряет фокус, т.е. курсор покидает этот элемент. | 2 |
onchange | Событие происходит, когда содержимое элемента формы, выделения или выбора изменяется (для элементов <input>, <select>, and <textarea>) | 2 |
oninput | Событие происходит, когда происходит ввод текста в элемент | 3 |
oninvalid | Происходит, когда элемент заполнен неверно | 3 |
onreset | Событие происходит при сбросе формы (аналогично нажатию на кнопку типа reset) | 2 |
onsearch | Событие происходит, когда пользователь набирает что-либо в поле поиска (для <input type="search">) | 3 |
onselect | Наступает, когда пользователь выделяет текст (или его часть) в поле (для элементов <input> and <textarea>) | 2 |
onsubmit | Событие возникает при отправке формы и должно обрабатываться для <form> | 2 |
События перетаскивания
Событие | Описание | Уровень DOM |
---|---|---|
ondrag | Событие возникает, когда элемент перетаскивается | 3 |
ondragstart | Событие возникает, когда пользователь начинает перетаскивать элемент | 3 |
ondragend | Событие происходит, когда пользователь закончил перетаскивание элемента | 3 |
ondragenter | Происходит, когда перетаскиваемый элемент входит в пределы целевого элемента, в который его перемещают. | 3 |
ondragleave | Событие происходит, когда перетаскиваемый элемент покидает пределы целевого объекта для перемещения. | 3 |
ondragover | Событие происходит, когда перетаскиваемый элемент находится над целевым объектом для перемещения. | 3 |
ondrop | Событие происходит, когда перетаскиваемый элемент "бросают" в целевой объект, т.е. вы отпускаете курсор мыши над целевым объектом | 3 |
Клик по событиям с ссылкой приведет вас на страницу со статьей-описанием именно этого вида события с различными примерами.
Для того чтобы события приводили к каким-то изменениям на html-странице, в JavaScript записываются обработчики событий в виде функций. Вы можете прочитать подробней об этом в статье "Обработка событий в JavaScript".
Примечание: на самом деле событий намного больше, в таблицах приведены наиболее используемые. Для того чтобы посмотреть список событий, которые может обрабатывать браузер, можно воспользоваться кодом:
1 2 3 4 5 6 7 |
function showBrowserEvents() { var browserEvents = []; for (var e in document) if (typeof document[e] !== "function" && e !== null && e.substring(0, 2) === "on") browserEvents[browserEvents.length] = e; return browserEvents; } showBrowserEvents(); |
Объект события (Event Object)
При обработке события для элемента внутри функции-обработчика чаще всего используется ключевое слово this
для доступа к объекту, для которого это событие наступило. Однако, кроме этого, вы можете воспользоваться рядом свойств, которые браузер автоматически передает в функцию-обработчика в качестве единственного параметра. И этим параметром является объект Event, в котором собрана вся информация о событии. Посмотрим, какие свойства объекта Event мы можем использовать:
Свойство | Описание |
---|---|
type | тип события |
target | элемент, на котором было вызвано событие (т.е. тот, для которого была вызвана функция-обработчик события) |
currentTarget | элемент, к которому прикреплен обработчик события/для которого наступает событие |
relatedTarget (для мыши) | элемент с которого пришел курсор мыши при обработке события mouseover, и на элемент, который сейчас находится под курсором при обработке события mouseout. |
bubbles | логическое значение (true |false ), указывающее может ли данное событие всплывать |
eventPhase | число, показывающее на каком этапе произошло событие (1 - этап погружения (перехвата), 2 - на этапе цели, 3 - на этапе всплытия). |
which (для мыши) | возвращает число, указывающее, какая кнопка мыши была нажата (1 - левая кнопка, 2 - средняя кнопка, 3 - правая кнопка). Часто используется вместе с событием mousedown. Данное свойство может использоваться для получения дополнительной информации о событие, связанном с нажатием кнопки мыши. |
button (для мыши) | возвращает число, указывающее, какая кнопка мыши была нажата. Может быть использовано для получения дополнительной информации о событие, связанном с нажатием кнопки мыши. |
detail (для мыши) | возвращает число, указывающее сколько раз была нажата кнопка мыши в некоторой области за короткий промежуток времени. |
clientX, clientY (для мыши) | возвращают координаты курсора мыши: clientX - по горизонтали, clientY - по вертикали относительно левого верхнего угла клиентской области браузера. |
pageX, pageY (для мыши) | возвращают координаты курсора мыши от левой и верхней границы документа до курсора с учетом прокрутки. Могут совпадать с clientX (clientY) или быть больше на величину прокрутки по горизонтали (вертикали) |
screenX, screenY (для мыши) | возвращают информацию о положении курсора: screenX - по горизонтали, screenY - по вертикали относительно левого верхнего угла экрана. |
movementX, movementY (для мыши) | возвращают информацию о координате X и Y указателя относительно позиции последнего события mousemove. |
charCode (для клавиатуры) | возвращает Unicode-код символа нажатой клавиши (при обработке события keypress). Если данное свойство использовать для получения дополнительной информации о событиях keydown или keyup, то оно всегда вернёт "0". |
keyCode, which (для клавиатуры) | возвращает Unicode-код символа (при обработке события keypress) или код ключа Unicode (при обработке событий keydown и keyup). |
altKey, ctrlKey, metaKey, shiftKey (для мыши и клавиатуры) | возвращает true |false в зависимости от того, была ли нажата соответствующая клавиша (Alt , Ctrl , Meta и Shift ) , когда произошло событие. |
location (для клавиатуры) | возвращает число, указывающее на область клавиатуры или устройства в котором расположена нажатая клавиша (0 - основная область клавиатуры, 1 - область, в которой расположена левая клавиша CTRL или левая клавиша ALT, 2 - область, в которой расположена правая клавиша CTRL или правая клавиша ALT, 3 - цифровой клавиатура). |
timestamp | число (дата), когда наступило событие |
Кроме свойств, вы можете также использовать методы объекта Event:
Метод | Описание |
---|---|
preventDefault() | отменяет стандартное поведение браузера, например, переход по ссылке. |
stopPropagation() | предотвращает всплытие события |
Обычно вы можете получить данные о событии из объекта Event при записи функции-обработчика примерно в таком виде:
1 2 3 4 |
document.getElementById('test-elem').onclick = function(evt){ console.log(evt.type); //click console.log(evt.target); //<div id="test-elem">Click Here</div> } |
Всплытие событий
Всплытие событий подразумевает, что при обработке однотипных событий (например, клика или наведения курсора) на элементах, вложенных друг в друга, это событие всплывает по цепочке от самого глубоко вложенного элемента до самого верхнего родительского.
Код примера предполагает, что внутри <div id="testBubble">
расположено несколько абзацев. В каждом абзаце есть кнопка с классом close <button class="close">×</button>
. В скрипте обработка события клика назначена для 3-х элементов:
- Для родительского элемента
<body>
для всех элементов функция-обработчик меняет цвет фона<div id="testBubble">
случайным образом. - Для каждого абзаца другая функция-обработчик меняет фон и рамка слева для абзаца - они описаны в классе
blue
. - Для кнопки с классом close третья функция-обработчик назначает класс
fadeOut
для абзаца, в котором находится, и по окончании анимации, которая в этом классе описана, удаляет абзац.
При этом любой клик по абзацу не только меняет его класс на .blue
и обратно, но и вызывает изменение фона родительского блока, т.к. в нем срабатывет собственная функция-обработчик клика. Если же вы щелкаете на кнопке в правом верхнем углу каждого абзаца, то запускается вся цепочка функций-обработчиков - меняются фоны абзаца, родительского <div id="testBubble">
и абзац исчезает.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<style> p { padding: 20px; margin-bottom: 10px; position: relative; border: 1px solid #aaa; } .close { position: absolute; top: 5px; right: 5px; background-color: #166d84; color: #fff; } .blue { background-color: #95e7fc; border-left: 10px solid #419cb4; padding-left: 15px; } @-webkit-keyframes fadeOunDown{ to {opacity: 0;} } @keyframes fadeOunDown{ to {opacity: 0;} } .fadeOut { animation: fadeOunDown 2.5s; } </style> <div id="testBubble"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... quaerat! <button class="close">×</button></p> <p>Commodi soluta magnam, molestias praesentium quis inventore ... aboriosam? <button class="close">×</button></p> <p>Aliquid sint sunt porro in incidunt, iusto, repudiandae fugiat ... praesentium. <button class="close">×</button></p> <button id="stopBubble" class="button">Остановить всплытие при клике на кнопке</button> </div> <script> let randColor = () => Math.floor(Math.random()*256); document.body.onclick = function(){ testBubble.style.backgroundColor = `rgba(${randColor()}, ${randColor()}, ${randColor()})`; } let pCollection = document.getElementsByTagName('p'); for (let oneP of pCollection) { oneP.addEventListener('click', function(){ this.classList.toggle('blue'); }); } let close = document.querySelectorAll('.close'); close.forEach(btn => btn.addEventListener('click', hideParagraf, { once: true }) ) function hideParagraf(evt) { this.parentElement.classList.add('fadeOut'); setTimeout(function () { evt.target.parentElement.remove() }, 700); } function hideOnlyParagraf(evt) { evt.stopPropagation(); this.parentElement.classList.add('fadeOut'); setTimeout(function () { console.log(evt.target.parentElement); evt.target.parentElement.remove() }, 700); } stopBubble.onclick = function(event) { event.stopPropagation(); close.forEach(btn => { btn.removeEventListener('click', hideParagraf); btn.addEventListener('click', hideOnlyParagraf, { once: true}); }); } </script> |
Вы можете проверить сами, как работает пример всплытия события клика:
Пример всплытия события клика
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis tempora perspiciatis doloremque, minima dolorem. Quasi aliquid, voluptatem quisquam necessitatibus autem natus, maxime assumenda, voluptatibus, eius magni expedita dicta accusamus quaerat!
Commodi soluta magnam, molestias praesentium quis inventore. Minima maxime obcaecati ad, voluptates praesentium repudiandae sit esse delectus tempora aliquid culpa animi incidunt, fuga, necessitatibus tenetur laborum, eos optio alias. Laboriosam?
Aliquid sint sunt porro in incidunt, iusto, repudiandae fugiat itaque accusantium magnam doloremque nam! Libero, illo, iste! Dolores, adipisci blanditiis sapiente eius placeat, quam suscipit pariatur nisi veniam, laudantium praesentium.
Expedita dignissimos similique, enim possimus error! Consectetur quae enim magnam magni ipsa accusantium sunt possimus asperiores! Dolore assumenda, reiciendis soluta voluptatem quisquam tenetur ex cumque, labore, repellendus eveniet nemo provident.
Suscipit a, tempore ipsum quaerat voluptatem dolorem esse maiores blanditiis maxime ullam vitae eaque inventore quidem fugit sapiente eius veritatis totam ea? Molestiae iure voluptates est sapiente architecto ipsum. Possimus.
Возможно, вы увидели внизу <div id="testBubble">
кнопку "Остановить всплытие при клике на кнопке". Она предназначена для отмены функции hideParagraf(evt)
и замены ее на функцию hideOnlyParagraf(evt)
, в которую была добавлена одна строчка event.stopPropagation()
. Именно этот метод объекта Event позволяет остановить всплытие события и прервать обработку клика на кнопке, удаляющей параграф.
Если вы нажмете на эту кнопку, а затем будете щелкать на кнопки с крестиком, то не увидите изменения фона абзаца или содержащего его родительского элемента <div id="testBubble">
. При этом клик по тексту абзаца будет запускать цепочку кликов и в абзаце, и в <body>
.