Webzone Публикации Javascipt JavaScript - События DOM

JavaScript - События DOM

12:52 , 12 Август 2019
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: браузер имеет завершена загрузка страницы.
Например, чтобы выполнить какой-либо JavaScript при нажатии заголовка (h1), вы можете использовать следующее:


Пример:


<!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 и т. д.



Вопросы / Комментарии / Отзывы