Когда я начал изучать 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
Чтобы узнать больше о типах событий, посетите:
Отправка формы
Событие при наведении мыши
Нажатие клавиши
»Событие изменения
Кейап