Когда я начал изучать JavaScript, первой концепцией, с которой я действительно столкнулся, были события JavaScript. В результате моего опыта работы с событиями JavaScript я захотел создать блог, в котором упрощались бы события JavaScript, как их прослушивать и как реагировать на них.

Что такое события JavaScript?

Прежде всего, JavaScript может прослушивать события, происходящие в браузере. Эти события могут включать, помимо прочего, нажатие клавиши, отправку формы, щелчок мышью, наведение мыши, изменение при изменении, ввод с помощью мыши, фокусировку, размытие и т. д. Чтобы прослушивать эти события и реагировать на эти события, можно использовать метод addEventListener().

Метод .addEventListener()

.addEventListener() — это метод в JavaScript, который можно использовать для прослушивания событий, происходящих в браузере, и реагирования на них. Метод принимает два аргумента:

Аргумент 1: тип события, которое мы _слушаем_ (например, «клик», «отправить» и т. д.)

Аргумент 2: функция обратного вызова, которая _отвечает_ на указанное событие заданным образом.

Шаги по использованию .addEventListener()

Чтобы использовать .addEventListener(), мы должны:

1. Возьмите элемент, к которому мы хотим добавить прослушиватель событий, и сохраните этот элемент как ссылку в переменной.
2. Добавьте метод .addEventListener() к переменной, содержащей интересующий элемент.
3. Передайте тип события и функцию обратного вызова в качестве аргументов метода addEventListener().

Шаг 1: Возьмите интересующий элемент

Для захвата интересующего элемента можно использовать следующие методы:

document.getElementById()

Примечание. Этот метод вернет элемент с запрошенным идентификатором. Этот метод является наиболее специфичным, поскольку все идентификаторы уникальны для своих элементов.

пример:

//the HTML Element we want to add an event to
<button id=”button” className=”btn”></button>

//Using, document.getElementById(),I entered the id of the button in the parenthesis, added quotations marks to the id, and saved the element to a variable called buttonById
const buttonById = document.getElementById(“button”)
```

document.getElementsByClassName()

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

//the HTML element we would like to grab
<button id=”button” className=”btn”></button>

//used document.getElementByClassName, inserted the className into the parenthesis, and assigned the element to a variables called buttonByClass
const buttonByClass = document.getElementsByClassName(“btn”)

document.getElementsByTagName()

Примечание. Этот метод вернет все элементы с указанным именем тега. Этот метод является наименее специфичным и не рекомендуется, когда мы хотим получить один конкретный элемент.

//the HTML element we would like to grab
<button id=”button” className=”btn”></button>

//used document.getElementsByTagName(), passed the Tag Name surrounded by quotation marks, and assigned to a variable called buttonByTag
const buttonByTag = document.getElementsByTagName(“button”)

К другим методам относятся селекторы CSS, например:

document.querySelector(селектор)

document.querySelector вернет первый элемент, соответствующий запрошенному селектору. querySelector можно использовать для захвата элемента по его идентификатору, имени класса и имени тега.

Если мы посмотрим на следующие элементы HTML

<button id=”button1" className=”btn”>button 1</button>
<button id=”button2" className=”btn”>button 2</button>
<button id=”button3" className=”btn”>button 3</button>

Чтобы захватить первый элемент по его идентификатору с помощью querySelector, нам нужно передать # в скобках, за которыми следует его идентификатор.

const buttonQueryId = document.querySelector(“#button”)

Чтобы получить первый элемент по его имени класса с помощью querySelector, нам нужно передать файл . в круглые скобки, за которыми следует его className.

const buttonQueryClass = document.querySelector(“.btn”)

Чтобы получить первый элемент по его имени тега с помощью querySelector, нам нужно просто передать имя тега в кавычках.

const buttonQueryTag = document.querySelector(“button”)

**document.querySelectorAll(селектор)**

document.querySelectorAll() вернет список элементов, соответствующих критериям селектора. Метод захватывает элементы по их имени класса и имени тега.

Например,

<button id=”button1" className=”btn”>button 1</button>
<button id=”button2" className=”btn”>button 2</button>
<button id=”button3" className=”btn”>button 3</button>

чтобы захватить элементы по их div:

const buttonsTagName = document.querySelectorAll(“button”)

Чтобы узнать больше об этих двух методах, посетите этот веб-сайт.

Шаг 2: Добавьте метод addEventListener()

Мы можем добавить метод .addEventListener() к именам переменных, которые содержат интересующие нас элементы HTML.

пример:

//addEventListener() to a button we grabbed using getElementById and saved to a variables called buttonById
buttonById.addEventListener()
//addEventListener() to a button we grabbed using querySelector and saved to a variable called buttonQueryClass
buttonQueryClass.addEventListener()
//addEventListener to buttons we grabbed using querySelectorAll and saved to a variable called buttonsTagName
buttonsTagName.addEventListener()

Шаг 3: Передайте аргументы

Теперь мы можем перейти к последнему шагу — передаче аргументов.

Нажмите Событие

Например, если мы хотим добавить **событие щелчка** к нашей кнопке с функцией обратного вызова, которая будет отображать в console.log «hello» для каждого нажатия, мы могли бы написать:

//the HTML Element we want to click
<button id=“button” className=“btn”></button>

//step 1: grab the element
const buttonById = document.getElementById(“button”)
//step 2: add the .addEventListener() method 
//step 3: pass in event type and callback function as arguments
buttonById.addEventListener(“click”, myCallbackFunction)
//the callback function that will console.log “hello”
function myCallbackFunction(){
 console.log(“hello”)
}

Отправка формы

Если мы хотим добавить прослушиватель событий в форму, которая будет отображать «hello» в console.log каждый раз при отправке:

- Мы должны добавить eventListener к элементу ‹form›‹/form› вместо элемента кнопки

- Мы должны использовать «отправить» в качестве типа события.

- Мы должны добавить event.preventDefault() в функцию обратного вызова, чтобы предотвратить любое поведение формы по умолчанию.

Например,

//basic HTML form 
<form id=”form”>
 <label for=”username”>Username</label>
 <input type=”text” id=”name” name=”name” />
 <button type=”submit”>Enter Username</button>
</form>

//step1: grab the element
const form = document.getElementById(“form”)
//step2: add .addEventListener() method+ step 3: pass in the arguments
form.addEventListener(“submit”, myCallbackFunction)
function myCallbackFunction(event){
 event.preventDefault()
 console.log(“hello”)
}

Заключение

Я надеюсь, что это послужит руководством для начинающих, чтобы понять самые основы событий JavaScript. События JavaScript могут стать более сложными, особенно функции обратного вызова. Я оставил функции обратного вызова очень простыми -console.log("hello")- из-за этой сложности. Функции обратного вызова заслуживают отдельного блога или двух!

Чтобы узнать больше о функциях обратного вызова, посетите:
Что такое обратные вызовы в JS и как их использовать
event.target JavaScript

Чтобы узнать больше о типах событий, посетите:
Отправка формы
Событие при наведении мыши
Нажатие клавиши
»Событие изменения
Кейап

Ссылки:
Поиск HTML-элементов
Метод querySelector