Как запускать события в JavaScript?
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, граница раздела становится черной. Когда мышь покидает контейнер, граница раздела становится синей.