1 подписчик
🤓 "Создание Веб-сайта:"
❓Помните мы вызвали функцию JavaScript в HTML коде через нажатие кнопки?
<button onclick="showMessage()">
Show
</button>
Подобные взаимодействия пользователя с элементами страницы проще записывать через свойства событий непосредственно в JavaScript коде.
Оформляется данный код следующим образом:
имяЭлемента.свойство = имяСобытия;
В качестве свойства выступает тот самый onclick, а в качестве события - функция, которая запускается при нажатии на элемент. И да, элементом может быть не только кнопка.
let prompt = document.querySelector("#prompt");
const el = document.querySelector ("button");
function publish() {
prompt.innerHTML = "Website Published!";
}
el.onclick = publish;
Существуют и другие свойства событий:
• ondblclick - событие запускается при двойном щелчке на элемент.
• onscroll - событие запускается при прокручивании элемента.
• onchange - событие запускается после внесения изменений.
• oninput - событие запускается во время изменений.
Более современный метод добавления событий к элементам - это метод addEventListener(). В скобках мы пишем свойство события в двойных кавычках и через запятую имя события (функции). Однако в этом случае мы не пишем приставку on в свойстве события.
item.addEventListener("click", changeColor);
Мы также можем удалять события с помощью команды removeEventListener(). Это может пригодится, когда мы хотим, чтобы изменения произошли один раз. Рассмотрим пример 👇
const item = document.querySelector("div");
function changeColor () {
item.classList.toggle("pink");
item.removeEventListener(
"click", changeColor);
}
item.addEventListener("click", changeColor);
Как мы все знаем, существуют сенсорные устройства. Для таких устройств существует отдельные свойства событий, связанные с касанием:
• touchstart - событие запускается, когда пользователь прикоснулся к элементу.
• touchend - событие запускается, когда пользователь "отпустил" элемент.
• touchmove - событие запускается, когда пользователь перемещает палец по элементу.
• touchcancel - событие запускается, когда контакт прерывается. В отличие от touchend, когда пользователь полностью убирает палец с экрана, touchcancel запускается, когда пользователь сдвинул свой палец.
Вот такие существуют события в JavaScript. Теперь мы с Вами можем создавать их и использовать для своих целей 🔥😜
1 минута
1 февраля 2024