JavaScript - События DOM
События - это определенные действия, выполняемые конечным пользователем или самим веб-браузером. Он может запускаться в любой части документа, независимо от взаимодействия пользователя или браузера. События обычно используются в сочетании с функциями, и функция не будет выполняться до возникновения события. Чтобы сделать интерактивную веб-страницу, сценарий должен иметь доступ к содержимому документа и знать, когда пользователь взаимодействует с ним.
Обработчики событий Dom
Событие Document Object Model - это способ обработки событий и предоставления информации об этих событиях сценарию. Он предоставляет набор инструкций для стандартного способа определения того, что сгенерировало событие, какого типа события оно было, и когда и где произошло событие в документе. Два общих стиля: обобщенный addEventListener() и набор специальных обработчиков событий. Обработчики on-событий - это группа свойств, предлагаемых элементами DOM, которые помогают управлять тем, как этот элемент реагирует на события. У этих обработчиков событий есть имена, начинающиеся с «on», поэтому обработчик события для события click называется «onclick», а обработчик события для фокуса называется «onfocus».
Важно отметить, что каждый объект может иметь только один обработчик события для данного события. Вот почему addEventListener() часто является лучшим способом получать уведомления о событиях, особенно если вы хотите применять различные обработчики событий независимо друг от друга, даже для одного и того же события и / или для одного и того же элемента.
Встроенные атрибуты HTML
Существует несколько способов прикрепления обработчика событий. Добавление определенных атрибутов в тег является самым простым способом. События Inline привязаны к элементу по имени его атрибута, который начинается с префикса «on». Не все типы событий могут быть привязаны ко всем элементам. Вот список некоторых распространенных событий HTML:
- onchange: Изменен элемент HTML.
- onclick : Пользователь нажимает на элемент HTML.
- onmouseover: пользователь наводит мышь на элемент HTML.
- onmouseout: пользователь перемещает мышь от HTML-элемента.
- onkeydown: пользователь нажимает клавишу клавиатуры.
- onload: браузер имеет завершена загрузка страницы.
Пример:
<!DOCTYPE html>
<html>
<body>
<h1 id="Heading" onclick="alert('You Clicked...!!')">Click Here</h1>
</body>
</html>
Когда пользователь нажимает на текст «Заголовок» на веб-странице, вы можете видеть, как срабатывает событие клика, и выполняется строка кода JavaScript, содержащегося в атрибуте onclick.
Вызов функции
Когда происходят события, если вы хотите выполнить кучу кода, вы можете поместить все коды вместе в функцию и вызвать выполнение.
Пример:
<!DOCTYPE html>
<html>
<body>
<script type="text/Javascript">
function findSquare(i) {
alert("Square of a given number is : " + (i*i));
}
</script>
<input type="button" value="Click Me" onclick="findSquare (5)" />
</body>
</html>
Слушатель событий
Функция, вызываемая в ответ на событие, называется обработчиком событий. Затем вы можете присоединить обработчик события к элементу для определенного события. Когда пользователь взаимодействует с элементом, браузер обнаруживает, зарегистрирован ли обработчик событий для этого типа события для этого элемента. События мыши, такие как щелчок и mousemove, запускаются в большинстве браузеров и устройств. Однако в большинстве смартфонов событие mouseover не запускается вообще, потому что они не могут обнаружить палец, парящий по телефону. Некоторые смартфоны добавляют для этого датчики, поэтому в будущем смартфоны будут определять наведение мыши. Следующая программа демонстрирует, как захватывать разные типы событий в JavaScript.
Пример:
<!DOCTYPE html>
<html>
<body>
<h1 id="h4" onmouseover="handle(event)">Mouse Over Here !!</h1>
<h1 id="h2" onclick="handle(event)">Click Here !!</h1>
<h1 id="h3" ondblclick="handle(event)">Double Click Here !!</h1>
<script type="text/Javascript">
function handle(e) {
alert(e.type);
}
</script>
</body>
</html>
Добавление метода addEventListener
Вы также можете добавить прослушиватели событий с помощью метода addEventListener. Метод EventTarget.addEventListener() добавляет указанный объект, совместимый с EventListener, в список прослушивателей событий для указанного типа события в EventTarget, на котором он вызывается.
Пример:
<!DOCTYPE html>
<html>
<body>
<button id="eventBtn">Try it</button>
<p id="display"></p>
<script>
document.getElementById("eventBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("display").innerHTML = "Its Worked !!";
}
</script>
</body>
</html>
Другие модели событий
Стандарт Document Object Model предоставляет большое количество событий, и их можно сгруппировать по шести основным категориям:
- MouseEvents: click, mousedown, mouseup, mousemove и т. д.
- KeyboardEvents: keypress, keydown и keyup
- HTMLEvents: загрузка, ошибка, изменение размера, прокрутка и т. д.
- События формы: выберите, измените, отправьте, фокус и т. д.
- UIEvents: focusin и focusout.
- MutationEvents: DOMNodeInserted, DOMAttrModified и т. д.
Вопросы / Комментарии / Отзывы