Слушатели событий — один из фундаментальных навыков в 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 или даже убрать его со страницы!
Всем удачи и удачного кодирования!