Как запускать события в JavaScript?

Опубликовано: 1 Декабря, 2021

Javascript - это интерпретируемый, динамически типизированный язык сценариев на стороне клиента высокого уровня. HTML статичен, а Javascript используется для добавления функциональности к статическому HTML-коду. События HTML обрабатываются JavaScript. Когда происходит событие, необходимо предпринять какие-то действия. Это действие можно выполнить с помощью обработчиков событий JavaScript. В дополнение к JavaScript, jQuery, который по функциональности эквивалентен JavaScript, также может использоваться для запуска событий в HTML-документе. Чтобы работать с триггерными событиями JavaScript, важно знать, что такое событие. Событие - это взаимодействие между JavaScript и HTML. Вот некоторые общие события HTML:

  • onload: запускается, когда браузер завершает загрузку страницы.
  • onchange: запускается при изменении элемента HTML.
  • onclick: запускается при нажатии на элемент HTML.
  • onmouseover: запускается при наведении указателя мыши на элемент HTML.
  • onmouseout: срабатывает, когда мышь перемещается из элемента HTML.

События могут обрабатываться либо с помощью метода addEventListener (), либо мы можем запускать события для отдельных компонентов, определяя определенные функции JavaScript. Рассмотрим следующие примеры:

Использование метода document.addEventListener ()

Синтаксис:

 document.addEventListener (событие, функция, фаза)

Параметры:

  • событие: Обязательный параметр. Задает название события.
  • функция: Обязательный параметр. Задает функцию, которая должна обрабатывать событие.
  • фаза: это необязательный параметр, принимающий логическое значение. Если передано истинное значение, то обработчик событий выполняется на этапе захвата, а если передается ложное значение, то обработчик событий выполняется на фазе восходящей цепочки. Если элемент является дочерним элементом и запускает событие, событие регистрируется как для родительского, так и для дочернего элемента. Если значение фазы передается как истина, то обработчик событий сначала выполняется родительским элементом (фаза захвата), а если передано значение false, то дочерний элемент сначала выполняет обработчик событий. По умолчанию в качестве значения фазы передается false.

Пример 1:

HTML

<!DOCTYPE html>
< html >
< body >
< h3 >Click on the page to trigger click event</ h3 >
< h3 >Click on the page to trigger mouseover event</ h3 >
< h3 >Click on the page to trigger mouseoutevent</ h3 >
< script type = "text/javascript" >
document.addEventListener("click", function() {
alert("You clicked inside the document");
});
document.addEventListener("mouseover", function() {
document.body.style.backgroundColor = "lavender";
});
document.addEventListener("mouseout", function() {
document.body.style.backgroundColor = "white";
});
</ script >
</ body >
</ html >

Выход

Запуск события наведения курсора мыши:

Событие триггера mouseout:

Событие нажатия триггера:

Объяснение: В этом примере при наведении указателя мыши на документ цвет фона документа меняется на бледно-лиловый. Когда мышь перемещается, цвет фона документа снова становится белым. И когда пользователь щелкает в любом месте документа, появляется предупреждение. Эти действия обрабатываются обработчиками событий, которые запускаются при возникновении события.

Пример 2: запуск событий для отдельных элементов

HTML

<!DOCTYPE html>
< html >
< body >
< button onclick = "clickFunction()" >
Click Me
</ button >
< br >< br >
< div class = "container" id = "myDiv"
onmouseenter = "enterFunction()"
onmouseleave = "leaveFunction()" >
Hello World...How are you
</ div >
< script type = "text/javascript" >
function clickFunction(){
document.body.style
.backgroundColor = "pink";
}
function enterFunction(){
document.getElementById("myDiv")
.style.border = "1px solid black";
}
function leaveFunction(){
document.getElementById("myDiv")
.style.border = "2px solid blue";
}
</ script >
</ body >
</ html >

Выход:

Нажмите кнопку:

Перемещение мыши по странице

Пояснение Здесь отдельные элементы в документе HTML запускают разные события, и эти события вызывают разные функции JavaScript. Логика обработки событий указывается в функциях. При нажатии кнопки изменяется цвет фона веб-страницы. Другие обрабатываемые события - mouseenter и mouseleave. Когда мышь входит в контейнер с идентификатором myDiv, граница раздела становится черной. Когда мышь покидает контейнер, граница раздела становится синей.