События - это определенные действия, выполняемые конечным пользователем или самим веб-браузером. Он может запускаться в любой части документа, независимо от взаимодействия пользователя или браузера. События обычно используются в сочетании с функциями, и функция не будет выполняться до возникновения события. Чтобы сделать интерактивную веб-страницу, сценарий должен иметь доступ к содержимому документа и знать, когда пользователь взаимодействует с ним.

Обработчики событий Dom

Событие Document Object Model - это способ обработки событий и предоставления информации об этих событиях сценарию. Он предоставляет набор инструкций для стандартного способа определения того, что сгенерировало событие, какого типа события оно было, и когда и где произошло событие в документе. Два общих стиля: обобщенный addEventListener() и набор специальных обработчиков событий. Обработчики on-событий - это группа свойств, предлагаемых элементами DOM, которые помогают управлять тем, как этот элемент реагирует на события. У этих обработчиков событий есть имена, начинающиеся с «on», поэтому обработчик события для события click называется «onclick», а обработчик события для фокуса называется «onfocus».

Важно отметить, что каждый объект может иметь только один обработчик события для данного события. Вот почему addEventListener() часто является лучшим способом получать уведомления о событиях, особенно если вы хотите применять различные обработчики событий независимо друг от друга, даже для одного и того же события и / или для одного и того же элемента.

Встроенные атрибуты HTML

Существует несколько способов прикрепления обработчика событий. Добавление определенных атрибутов в тег является самым простым способом. События Inline привязаны к элементу по имени его атрибута, который начинается с префикса «on». Не все типы событий могут быть привязаны ко всем элементам. Вот список некоторых распространенных событий HTML:

1. onchange: Изменен элемент HTML.
2. onclick : Пользователь нажимает на элемент HTML.
3. onmouseover: пользователь наводит мышь на элемент HTML.
4. onmouseout: пользователь перемещает мышь от HTML-элемента.
5. onkeydown: пользователь нажимает клавишу клавиатуры.
6. onload: браузер имеет завершена загрузка страницы.

Например, чтобы выполнить какой-либо JavaScript при нажатии заголовка (h1), вы можете использовать следующее:

 


  
    
Click Here
  

Когда пользователь нажимает на текст «Заголовок» на веб-странице, вы можете видеть, как срабатывает событие клика, и выполняется строка кода JavaScript, содержащегося в атрибуте onclick.

Вызов функции

Когда происходят события, если вы хотите выполнить кучу кода, вы можете поместить все коды вместе в функцию и вызвать выполнение.

Слушатель событий

Функция, вызываемая в ответ на событие, называется обработчиком событий. Затем вы можете присоединить обработчик события к элементу для определенного события. Когда пользователь взаимодействует с элементом, браузер обнаруживает, зарегистрирован ли обработчик событий для этого типа события для этого элемента. События мыши, такие как щелчок и mousemove, запускаются в большинстве браузеров и устройств. Однако в большинстве смартфонов событие mouseover не запускается вообще, потому что они не могут обнаружить палец, парящий по телефону. Некоторые смартфоны добавляют для этого датчики, поэтому в будущем смартфоны будут определять наведение мыши. Следующая программа демонстрирует, как захватывать разные типы событий в JavaScript.

 


  
    
Mouse Over Here !!
    
Click Here !!
    
Double Click Here !!
    
  

Добавление метода addEventListener

Вы также можете добавить прослушиватели событий с помощью метода addEventListener. Метод EventTarget.addEventListener() добавляет указанный объект, совместимый с EventListener, в список прослушивателей событий для указанного типа события в EventTarget, на котором он вызывается.

 
document.addEventListener('click', myfunction, false);

Пример

 


  
    Try it
    

    
  

Другие модели событий

Стандарт Document Object Model предоставляет большое количество событий, и их можно сгруппировать по шести основным категориям:

1. MouseEvents: click, mousedown, mouseup, mousemove и т. д.
2. KeyboardEvents: keypress, keydown и keyup
3. HTMLEvents: загрузка, ошибка, изменение размера, прокрутка и т. д.
4. События формы: выберите, измените, отправьте, фокус и т. д.
5. UIEvents: focusin и focusout.
6. MutationEvents: DOMNodeInserted, DOMAttrModified и т. д.

Источник: http://net-informations.com/js/dom/events.htm

(Пока оценок нет)