WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

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


Регистрация на сайте

DOM - обработка событий (Events)

DOM - обработка событий (Events)

Браузер отслеживает события которые происходят в его окне. События могут быть привязаны к определенному элементу, группе элементов, или к окну браузера. 

События могут генерироваться как пользователем (например: перемещение мышки) так и системой (например: законцилась анимация )

События могут быть разных типов, например:

  • нажатия клавиш мыши, перемещение курсора
  • нажатие клавиш клавиатуры
  • изменение размеров окна браузеа (закрытие окна)
  • загрузка страницы в окно
  • заполнение формы
  • воспроизведение видео
  • возникновение ошибок.

Реакция на события описывается через бработчики событий (events listeners или event handlers).

Браузер постоянно отслеживает все события, при его возникновении (event firing) он ищет назначенную этому событию фукцию-обработчик события и запускает её (если она найдена).

То есть: события, как правило, используются в сочетании с функциями, функция не будет выполняться до возникновения события (например, до того, как пользователь нажал на кнопку).

Типы событий

События, связанные с мышью (mouse events)

Событие Описание DOM
onclick Клик левой кнопкой мыши 2
oncontextmenu Клик правой кнопкой мышки 3
ondblclick Два клика подряд левой кнопкой 2
onmousedown Нажатие левой кнопки мышки 2
onmouseenter Курсор попал на элемент 2
onmouseleave Курсор ушёл с элемента 2
onmousemove Курсор переместился, находясь над элементом 2
onmouseover Курсор находится над элементом или его дочерними элементами 2
onmouseout Курсор ушёл с области самого элемента или одного из его дочерних элементов 2
onmouseup Отпускание левой кнопки мышки 2

События клавиатуры (keyboard events)

Событие Описание DOM
onkeydown Нажатие кнопки клавиатурв 2
onkeypress Нажатие и отпускание кнопки клавиатуры 2
onkeyup Отпускание кнопки клавиатуры 2

События объекта frame (frame/window events)

Собвтие Описание DOM
onabort Загрузка документа в фрейм прервана 2
onbeforeunload Начало загрузки документа в фрейм 2
onerror Ошибка загрузки файла в фрейм 2
onhashchange Изменился параметр anchor фрейма 3
onload Загрузка документа в фрейм 2
onpageshow Событие происходит, когда пользователь переходит на веб-страницу 3
onpagehide Событие происходит, когда пользователь уходит с веб-страницы 3
onresize Событие возникает, когда размер окна документа изменяется 2
onscroll Событие происходит при прокрутке элемента 2
onunload Событие происходит после выгрузки страницы (для <body>) 2

События, связанные с формой (form events)

Событие Описание DOM
onblur Событие происходит, когда элемент теряет фокус 2
onchange Событие происходит, когда изменилось содержимое элемента формы (для <input>, <keygen>, <select> и <textarea>) 2
onfocus Событие возникает, когда элемент получает фокус 2
onfocusin Событие возникает, когда элемент собирается получить фокус 2
onfocusout Событие происходит, когда элемент теряет фокус 2
oninput Событие возникает, когда элемент получает пользовательский ввод 3
oninvalid Событие oninvalid происходит, когда элемент <input> недопустим. 3
onreset Событие происходит, когда форма сбрасывается 2
onsearch Событие возникает, когда пользователь что-то пишет в поле поиска (для <input = "search">) 3
onselect Событие происходит после выбора пользователем текста (для <input> и <textarea>) 2
onsubmit Событие происходит при отправке формы 2

События drag/drop

Событие Описание DOM
ondrag Событие возникает, когда элемент перетаскивается 3
ondragend Событие происходит, когда пользователь закончил перетаскивание элемента 3
ondragenter Событие возникает, когда элемент перетаскивания входит в целевую точку  3
ondragleave Событие происходит, когда элемент перетаскивания оставляет целевую точку 3
ondragover Событие происходит, когда элемент перетаскивания находится над целевой точкой перетаскивания 3
ondragstart Событие возникает, когда пользователь начинает перетаскивать элемент 3
ondrop Событие происходит, когда перетаскиваемый элемент выбрасывается в целевой точке 3

Clipboard - события

Событие Описание DOM
oncopy Событие происходит, когда пользователь копирует содержимое элемента
oncut Событие происходит, когда пользователь вырезает содержимое элемента
onpaste Событие возникает, когда пользователь вставляет некоторый контент в элемент

Print - события

Событие Описание DOM
onafterprint Событие происходит, когда страница начала печать, или если диалоговое окно печати закрывается 3
onbeforeprint Событие происходит, когда страница будет напечатана 3

Media - события

Событие Описание DOM
onabort The event occurs when the loading of a media is aborted 3
oncanplay The event occurs when the browser can start playing the media (when it has buffered enough to begin) 3
oncanplaythrough The event occurs when the browser can play through the media without stopping for buffering 3
ondurationchange The event occurs when the duration of the media is changed 3
onemptied The event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects) 3
onended The event occurs when the media has reach the end (useful for messages like "thanks for listening") 3
onerror The event occurs when an error occurred during the loading of a media file 3
onloadeddata The event occurs when media data is loaded 3
onloadedmetadata The event occurs when meta data (like dimensions and duration) are loaded 3
onloadstart The event occurs when the browser starts looking for the specified media 3
onpause The event occurs when the media is paused either by the user or programmatically 3
onplay The event occurs when the media has been started or is no longer paused 3
onplaying The event occurs when the media is playing after having been paused or stopped for buffering 3
onprogress The event occurs when the browser is in the process of getting the media data (downloading the media) 3
onratechange The event occurs when the playing speed of the media is changed 3
onseeked The event occurs when the user is finished moving/skipping to a new position in the media 3
onseeking The event occurs when the user starts moving/skipping to a new position in the media 3
onstalled The event occurs when the browser is trying to get media data, but data is not available 3
onsuspend The event occurs when the browser is intentionally not getting media data 3
ontimeupdate The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media) 3
onvolumechange The event occurs when the volume of the media has changed (includes setting the volume to "mute") 3
onwaiting The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data) 3

Animation - события

Событие Описание DOM
animationend The event occurs when a CSS animation has completed 3
animationiteration The event occurs when a CSS animation is repeated 3
animationstart The event occurs when a CSS animation has started 3

Transition - события

Событие Описание DOM
transitionend The event occurs when a CSS transition has completed 3

Server-Sent - события

Событие Описание DOM
onerror The event occurs when an error occurs with the event source
onmessage The event occurs when a message is received through the event source
onopen The event occurs when a connection with the event source is opened

Другие события

Событие Описание DOM
onmessage The event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window) 3
onmousewheel Deprecated. Use the onwheel event instead
ononline The event occurs when the browser starts to work online 3
onoffline The event occurs when the browser starts to work offline 3
onpopstate The event occurs when the window's history changes 3
onshow The event occurs when a <menu> element is shown as a context menu 3
onstorage The event occurs when a Web Storage area is updated 3
ontoggle The event occurs when the user opens or closes the <details> element 3
onwheel The event occurs when the mouse wheel rolls up or down over an element 3

Touch - события

Событие Описание DOM
ontouchcancel The event occurs when the touch is interrupted
ontouchend The event occurs when a finger is removed from a touch screen
ontouchmove The event occurs when a finger is dragged across the screen
ontouchstart The event occurs when a finger is placed on a touch screen

Объект event

Когда происходит событие, браузер создает объект 'event', помещает в него детали события и передает его в качестве аргумента обработчику.

пример ниже выводит на консоль все свойства текущего объека event, созданного баузеом при клике мышкой по элементу ELEMENT .

function myFunc2(evnt){ console.log('Event: ', evnt); }

ELEMENT.addEventListener('click', myFunc2);


Константы

Константа Описание DOM
CAPTURING_PHASE The current event phase is the capture phase (1) 1
AT_TARGET The current event is in the target phase, i.e. it is being evaluated at the event target (2) 2
BUBBLING_PHASE The current event phase is the bubbling phase (3) 3

Свойства

Свойство Описание DOM
bubbles Returns whether or not a specific event is a bubbling event 2
cancelable Returns whether or not an event can have its default action prevented 2
currentTarget Returns the element whose event listeners triggered the event 2
defaultPrevented Returns whether or not the preventDefault() method was called for the event 3
eventPhase Returns which phase of the event flow is currently being evaluated 2
isTrusted Returns whether or not an event is trusted 3
target Returns the element that triggered the event 2
timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created 2
type Returns the name of the event 2
view Returns a reference to the Window object where the event occured 2

Методы

Метод Описание DOM
preventDefault() Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur 2
stopImmediatePropagation() Prevents other listeners of the same event from being called 3
stopPropagation() Prevents further propagation of an event during event flow 2

Объект - MouseEvent

Свойство Описание DOM
altKey Возвращает, была ли нажата клавиша «ALT» при запуске события мыши 2
button Возвращает, какая кнопка мыши была нажата при запуске события мыши 2
buttons Возвращает, какие кнопки мыши были нажаты при запуске события мыши 3
clientX Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено 2
clientY Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено 2
ctrlKey Возвращает, была ли нажата клавиша CTRL при запуске события мыши 2
detail Возвращает число, указывающее, сколько раз щелкнули мышь 2
metaKey Возвращает, была ли нажата клавиша «META» при срабатывании события 2
pageX Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было запущено
pageY Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было запущено
relatedTarget Возвращает элемент, связанный с элементом, вызвавшим событие мыши 2
screenX Возвращает горизонтальную координату указателя мыши относительно экрана, когда событие было вызвано 2
screenY Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано 2
shiftKey Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события 2
which Возвращает, какая кнопка мыши была нажата при запуске события мыши 2

Объект - KeyboardEvent

Свойство Описание DOM
altKey Возвращает, была ли нажата клавиша «ALT» при срабатывании  события 2
ctrlKey Возвращает, была ли нажата клавиша CTRL при срабатывании события клавиатуры 2
charCode Возвращает код символа Юникода клавиши, которая вызвала событие onkeypress 2
key Возвращает для нажатой клавиши её значение  3
location Возвращает местоположение ключа на клавиатуре или устройстве 3
metaKey Возвращает, была ли нажата клавиша «meta» при запуске  события 2
shiftKey Возвращает, была ли нажата клавиша «SHIFT» при срабатывании  события 2
which Возвращает код символа Юникода ключа, вызвавшего событие onkeypress, или код ключа Unicode ключа, вызвавшего событие onkeydown или onkeyup 2

HashChangeEvent - объект

Property Описание DOM
newURL Returns the URL of the document, after the hash has been changed
oldURL Returns the URL of the document, before the hash was changed

PageTransitionEvent - объект

Property Описание DOM
persisted Returns whether the webpage was cached by the browser

FocusEvent - объект

Property Описание DOM
relatedTarget Returns the element related to the element that triggered the event 3

AnimationEvent - объект

Property Описание DOM
animationName Returns the name of the animation
elapsedTime Returns the number of seconds an animation has been running

TransitionEvent - объект

Property Описание DOM
propertyName Returns the name of the CSS property associated with the transition
elapsedTime Returns the number of seconds a transition has been running

WheelEvent - объект

Property Описание DOM
deltaX Returns the horizontal scroll amount of a mouse wheel (x-axis) 3
deltaY Returns the vertical scroll amount of a mouse wheel (y-axis) 3
deltaZ Returns the scroll amount of a mouse wheel for the z-axis 3
deltaMode Returns a number that represents the unit of measurements for delta values (pixels, lines or pages) 3

 

Регистрация обработчика событий

Зарегистриовать обработчик событий можно разными способами.

Присвоить значение специальному атрибуту (onclick, onkeypress, onmouseenter, ...) при описании HTMl тега. Например:

<button id='myButton1' onclick="alert('My event!');">Press me</button>

Можно его изменить с помощью соответствующего свойства объекта element:

document.getElementById('myButton1').onclick = 'alert("New action")'

Можно использовать метод объекта element - addEventListener(event, listener). Например:

document.getElementById('myButton1').addEventListener('click', click2); function click2(){ alert('Listener 1 - click2()'); }

или

document.getElementById('myButton1').addEventListener('click', () => { alert ('Listener 1!!'); });

Если в этом примере  ипользовать оба способа, то к элементу id=myButton1 , к событию click будут привязаны сразу 2 обработчика.


Удаление обработчика событий

Обработчик событий, который привязан к элементу через его атрибут, можно удалить, переопределив значение атрибута.

Привязать обработчик к элементу 

<button id="myButton1" onclick='alert("Event listener connected")'>Click me</button>

или

document.getElementById('myButton1').onclick='alert("Event listener connected")';

Удалить его

document.getElementById('myButton1').onclick='';

Можно использовать метод элемента removeEventListener(событие, имя_обработчика)

Привязать

function myFunc2(){ alert("Listener myFunc2() response"); } document.getElementById('myButton1').addEventListener('click', myFunc2);

Удалить

document.getElementById('myButton1').removeEventListener('click', myFunc2);


Удалить все обработчики событий у элемента можно, например, клонировав элемент (метод cloneNode()) , при этом обработчики событий не клонируются. 

function removeAllEventListeners(elmntID){ var oldElement = document.getElementById(elmntID); var newElement = oldElement.cloneNode(true); oldElement.parentNode.replaceChild(newElement, oldElement); // cleanup out1 out1.innerHTML = ''; }



Events bubbling, capturing

event.target - элемент, который инициировал событие.

event.currentTarget - текущий элемент, обрабатывающий событие.

event bubbling (event propagation) - обработка события, котоое инициировал элемент, всеми его родительскими элементами (снизу вверх или от дочернего элемента).

event capturing - 

event.eventPhase - фаза обработки события (capturing=1, bubbling=3)

Стандартные события DOM проходят фазы обработки событий (event.eventPhase):

Константа Значение Описание
Event.NONE 0 Ни одно событие не обрабатывается
Event.CAPTURING_PHASE 1 Событие передаётся через объекты-предки целевого элемента (event.target). Этот процесс начинается с объекта Window, затем - Document, затем HTMLHtmlElement и т. д. через элементы до тех пор, пока не будет достигнут непоседственно родительский элемент. Обработчики событий, зарегистрированные для Capturing (при вызове EventTarget.addEventListener (EVENT, HANDLER, useCapture)), запускаются на этом этапе.
Event.AT_TARGET 2 Событие достигло целевого элемента. В это время вызываются обработчики событий, зарегистрированные для этой фазы. Если Event.bubbles принимает значение false, обработка события завершается после завершения этой фазы.
Event.BUBBLING_PHASE 3 Событие распространяется к предкам целевого элемента, в обратном порядке, начиная с его непосредственного родителя, и в конечном итоге достигает объекта Window. Этот процесс называется bubbling происходит только в том случае, если Event.bubbles принимает значение true. Обработчики событий, зарегистрированные для этой фазы, запускаются в это время.
  • Capturing phase - событие переходит к элементу
  • Target phase - событие достигло целевого элемента
  • Bubbling phase - событие "поднимается" от элемента