#6 События в Javascript
В этом видео мы с вами рассмотрим события (по английски евенты) в javascript. И мы с вами на самом деле их уже использовали, когда писали onсlick на DOM елементе. То есть мы с вами добавляли евент клик на DOM елемент.
Зачем нам нужны евенты вообще? Когда мы хотим выполнить какой-то код при клике на елемент, либо при наведении мыши, либо при фокусе, то нам нужны евенты. То есть мы вешаем евент на DOM елемент и он там висит. И ждет, когда же мы сделаем такой евент. Например когда мы кликнем по елементу. И тогда он выполняет эту функцию.
Вешать евенты с помощью html, это неправильно и не гибко. Намного лучше для этого использовать специальный метод. Это метод addEventListener.
Давайте уберем атрибут onclick с нашей кнопки, и добавим ей класс change
<button class='change'>Change</button>
Теперь в начале выполнения нашего javascript файла мы хотим повесить слушателя (по английски listener) этого евента на нашу кнопку.
Но сейчас мы столкнемся с одним нюансом. Давайте попробуем в нашем файле найти кнопку и законсолить ее
console.log(document.querySelector('.change'))
Если мы посмотрим в браузер, то нам вывелось null. И вполне справедливо, так как браузер исполняет код сверху вниз, и на момент, когда у нас отрабатывает javascript, DOM у нас еще не загружен. Пофиксить это очень просто. Давайте переставим script javascript в конец body. Это абсолютно нормальная практика.
<body>
<button class='change'>Change</button>
<script src='code.js'></script>
</body>
Теперь если мы посмотрим в браузер, то наш елемент вывелся и мы можем с ним работать. Давайте повесим listener клика на нашу кнопку.
Давайте запишем наш DOM елемент в переменную и добавим addEventListener. Это функция, которая первым параметром принимает название евента, в нашем случае клик, а вторым параметром функцию, которая выполнится, когда мы кликнем.
var changeButton = document.querySelector('.change')
changeButton.addEventListener('click', function () {
console.log('we clicked!')
})
Если мы посмотрим в браузер, то при клике у нас вывелся наш console.log.
И таким образом можно навешивать сколько угодно обработчиков. Наприме давайте добавим еще один listener.
var changeButton = document.querySelector('.change')
changeButton.addEventListener('click', function () {
console.log('we clicked!')
})
changeButton.addEventListener('click', function () {
console.log('we clicked2!')
})
Давайте теперь напишем небольшой пример. Мы хотим создать 2 елемента и при наведении на первый, мы хотим показывать второй елемент.
Давайте добавим 2 елемента на страницу и добавим им классы. Второй елемент скроем написав inline display: none. Конечно, лучше было бы написал стили в отдельном css файле, но для маленького примера можно и так.
<div class='firstElement'>
First element
</div>
<div style='display: none;' class='secondElement'>
Second element
</div>
Теперь давайте найдем эти два елемента в нашем javascript
var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')
И навесим на первый елемент 2 события: mouseover и mouseout. То есть первое будет происходить при наведении на елемент, а второе когда курсор уходит с елемента.
var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')
firstElement.addEventListener('mouseover', function () {
console.log('mouse in')
})
firstElement.addEventListener('mouseout', function () {
console.log('mouse out')
})
Если мы посмотрим в браузер, то при наведении и выведении курсора выводится console.log.
Давайте теперь при наведении добавим второму елементу display: block, а при уведении курсора display: none
var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')
firstElement.addEventListener('mouseover', function () {
secondElement.style.display = 'block'
})
firstElement.addEventListener('mouseout', function () {
secondElement.style.display = 'none'
})
Если мы посмотрим в браузер, то при наведении на первый елемент у нас показывается второй елемент, а при уведении курсора скрывается.
Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.