Слушатели событий — один из фундаментальных навыков в Javascript. При обучении на веб-разработчика в 2020 году Javascript является важным навыком. Это позволяет вам изменять вещи на странице без необходимости полной перезагрузки страницы. До сих пор вы создавали потрясающие и красивые статические веб-страницы, но пришло время сделать их динамическими. Прослушиватель событий — это простой и мощный инструмент, который поможет повысить уровень ваших навыков!

Перейдем сразу к делу: мы будем использовать один метод в javascript, чтобы изменить цвет h1 с синего на красный.

Синтаксис показан ниже:

element.addEventListener(event, function);

Предполагая, что у нас есть файлы Javascript и CSS, связанные с документом HTML, мы начнем со следующего кода в наших файлах.

styles.css

h1 {
color: blue;
}

index.html

<div class=”container”>
<h1 id=”title”>Event listeners are fun!</h1>
<button id=”change-title-color”>Change text color to red</button>
</div>

Наш файл javascript в настоящее время пуст. Взглянув на блок кода HTML выше, у нас есть идентификатор h1, установленный на «заголовок», и идентификатор кнопки, установленный на «change-title-color». Эти идентификаторы позволят нашему javascript-файлу находить нужные элементы на странице и взаимодействовать с ними.

Примечание. Существуют и другие способы доступа к элементам помимо ID (например, имена тегов, имена классов), но пока мы будем использовать атрибут ID.

Теперь, глядя на наш пустой файл javascript, мы хотим создать переменную для хранения элемента h1 и переменную для хранения элемента кнопки.

index.js

const button = document.getElementById(‘change-title-color’)
const h1 = document.getElementById(‘title’)

Чтобы получить соответствующие элементы, мы просто вызываем getElementById() для объекта документа и передаем идентификатор элемента в виде строки.

Затем пришло время добавить прослушиватель событий к одному из двух элементов, доступных нам через созданные нами переменные. Добавим его в переменную «кнопка».

index.js

//variables for the h1 and button elements
const button = document.getElementById(‘change-title-color’)
const h1 = document.getElementById(‘title’)
//adding the event listener to the button
button.addEventListener(“click”, function () {
})

Как показано выше, метод вызывается для переменной кнопки. У метода есть два параметра: событие и функция.

Событие указывает, что метод будет «прослушивать». Это может быть нажатие клавиши со стрелкой, наведение курсора или, в нашем случае, щелчок. Второй параметр — это функция, которая будет вызываться при возникновении события. Мы можем либо передать предопределенную функцию, либо создать ее непосредственно в аргументе. Мы сделаем последнее.

Внутри блока кода для вызываемой функции мы просто получим доступ к свойству стиля элемента h1, а затем к свойству цвета. Тогда мы просто установим его равным «красному».

index.js

button.addEventListener(“click”, function () {
   h1.style.color = “red”
})

Откройте файл index.html в браузере и нажмите кнопку. Вы должны увидеть, как текст выше изменится с синего на красный.

Поздравляем! Вы сделали большой шаг к созданию привлекательных и интерактивных веб-страниц!

Поэкспериментируйте с различными вариантами использования функции addEventListener(). Посмотрите, сможете ли вы изменить текст внутри элемента h1 или даже убрать его со страницы!

Всем удачи и удачного кодирования!