Событие объекта DOM
Событие - это регистратор действия пользователя на странице: движения курсора, нажатия на элементы и многих других. Событию можно назначить обработчик. Обработчик - функция JavaScript реагирующая на событие вызванное действием пользователя на странице.
Браузер регистрирует возникающие события, но их выполнение ввиду однопоточности JavaScript происходит в порядке очереди. После окончания обработки первого события, происходит выполнение кода обработчика второго зарегистрированного события.
Назначение события объекту DOM присваиванием функции специальному свойству обозначающему событие:
windows.onload=()=>{}
onload регистрирует событие окончания построения модели DOM.
Код запущенный внутри функции будет выполняться после полной загрузки страницы.
Это позволяет размещать код JavaScript в начале документа, тогда как код
размещенный в начале документа HTML сработает раньше построения DOM и не сможет
обратиться к еще незагруженным элементам.
Назначение события объекту DOM через метод addEventListener():
document.body.addEventListener('click',()=>{})
click событие клика мыши или нажатия на элемент;
()=>{} анонимная функция обрабатывающая событие.
В отличии от предыдущего метода назначения события, в данном методе имена событий указываются без on: onclick - click.
Если обработчик события назначен объекту в виде функции определяемой с ключевым словом function, то внутри данной функции
к объекту можно обратиться при помощи ключевого слова this:
<span id='myObjectSpan'>объект span</span>
document.querySelector('#hello').addEventListener('click', function(){
console.log(this)
this.textContent='span'
})
function+this=этот объект
Данный вид функции выполняется в контексте объекта, в котором вызывается, параметр this содержит этот объект.
Стрелочная функция в данном примере будет ссылаться на глобальный объект window.
Другой способ получения ссылки на объект вызвавший текущее событие:
<span id='myObjectSpan'>объект span</span>
document.querySelector('#bye').addEventListener('click', (e)=>{
console.log('Е',e)
e.target.textContent='e.target'
console.log('target',e.target)
})
ссылка на данный объект была получена из свойства объекта события
(e)=> первый параметр с произвольным именем обработчика события, содержит объект события;
e.target свойство target объекта события содержит ссылку на объект DOM у которого было вызвано данное событие;
Срабатывает как у функции определенной при помощи ключевого слова function, так и у стрелочной функции.
Назначение обработчика события объекту DOM через атрибут-событие:
<span id='oSpan' onclick=gg()>при щелчке на этом объекте произойдет обработка события onclick</span>
function gg(){
let oSpan = document.querySelector('#oSpan')
oSpan.textContent='обработка события завершена'
}
при нажатии на этом объекте произойдет обработка события onclick
onclick=gg() обработчик события назначается как значение атрибута-события.