Как обрабатывать события в JavaScript (примеры и все)

kak obrabatyvat sobytiya v javascript primery i vse

В этом блоге я попытаюсь объяснить основы механизма обработки событий в JavaScript, без помощи любой внешней библиотеки, таких как Jquery/React/Vue.

В этой статье я объясню следующие темы:

  1. The документ и окно объектов и добавление Слушатели событий им.
  2. The Event.preventDefault() метод и его использование
  3. The Event.stopPropagation() метод с примером
  4. Как удалить событие слушатель от элемента.

документ и окно объекты с Слушатели событий

Объект Window представляет вкладку. Если вы читаете этот блог в подходящем браузере, ваша текущая вкладка представляет объект Window.

Объект окна имеет доступ к такой информации, как панель инструментов, высота и ширина окна, подсказки и оповещения. Давайте посмотрим, как мы можем добавить прослушиватель событий (навод мыши) к объекту окна и проанализируем некоторые его свойства.

Как добавить прослушиватель к объекту window

The addEventListener Метод является наиболее предпочтительным способом добавления слушателя событий окно, документ или любой другой элемент в DOM.

Существует еще один способ, который называется свойством onclick, onmouseover и т.д. Но это не так полезно, поскольку не позволяет нам добавлять несколько прослушивателей событий в один элемент. Остальные методы это позволяют.

An событие Объект передается как аргумент (необязательный) к обработчику, содержащему всю информацию, связанную с событием (в нашем случае, наведение мыши) в открывшемся окне.

Откройте инструменты разработчика на этой странице и скопируйте, вставьте следующий код на панель консоли и нажмите Enter.

window.addEventListener("mousedown",function(event){
 alert("window");
 console.log(event);
});

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

Примечание: Если вы перейдете на любую другую вкладку и щелкните правой кнопкой мыши, это событие не будет запущено, поскольку оно принадлежит только этой вкладке (объект Window).

OkOuvlALsx7sPyDl7NJ2AfcjV7yCSoVpN2TK

Детали события mousedown

В следующих нескольких строках я объясню некоторые важные восторженные свойства, соответствующие mousedown событие, которое мы только что провели.

кнопку: Поскольку это было событие нажатия мыши, она сообщит вам, какую кнопку вы нажали. Для мыши левый, средний и правый соответствуют 0, 1 и 2 соответственно. Если нажать правую кнопку, вы увидите значение 2.

clientX и клиентY: Расположение относительно левого верхнего угла области содержимого (окно просмотра). Просто проанализируйте значение этих свойств с местом, которое вы щелкнули, и вы увидите, как они связаны. Даже если вы прокручиваете страницу вниз, эти свойства остаются неизменными. Ссылка на ScreenX и ScreenY в левом верхнем углу экрана (монитор).

Alkey/ctrlkey: Если вы держите любую из этих клавиш нажатой при выполнении операции щелчка правой кнопкой мыши, вы увидите, что эти значения соответствуют действительности. В противном случае они ошибочны, как в нашем случае.

цель: Он соответствует элементу, над которым вы выполнили действие. Какой бы элемент вы ни нажали, вы можете увидеть информацию, соответствующую этому свойству, на консоли

Что такое объект документа?

Документ состоит из находящегося во внутреннем окне. The документ объект является корнем каждого узла в DOM. При загрузке страницы HTML в браузере документ представляет эту страницу полностью.

Event.preventDefault() метод и его использование

Иногда мы не хотим, чтобы элемент HTML вел себя так, как он должен вести себя по умолчанию. В таком случае мы можем использовать этот метод.

Пример: щелчок элемента привязки приведет к перенаправлению браузера на эту страницу по умолчанию. Попробуем этого уйти.

<html>

<body>

  <a href="

  <script>
    let link = document.querySelector("a"); // It is the method to access the first matched element
    link.addEventListener("click", function(event) {
      console.log("Redirecting Stopped");
      event.preventDefault();
    });
  </script>
</body>

</html>

Вы можете создать файл HTML и проверить этот код.

Event.stopPropagation() метод

События текут наружу. Есть определенные случаи, например, когда у вас есть вложенные элементы, и вы выполняете какое-то событие с дочерним, а он заканчивает выполнением определенного действия и над родительским, чего вы хотите избежать. В таких случаях этот метод полезен.

Звучит немного запутано, но я надеюсь, что приведенный ниже пример прояснит для вас.

Представьте, что у вас есть кнопка внутри абзаца, и вы подключили событие нажатия мыши к обоим. Вы хотите добиться таких случаев использования:

  1. Если вы щелкните по кнопке правой кнопкой мыши, она должна показать, что она была нажата и не распространяется на родительский элемент (т.е. абзац).
  2. Если вы щелкните левой кнопкой мыши на кнопке, она должна распространяться наружу и запускать прослушиватель события абзаца.

Решение:

<html>

<body>
  <p id="demo"> Hello Ho<button id="button12"> Button2 </button> </p>
  <script>
    // Event Listener on the Button and it's logic
    document.getElementById("button12").addEventListener("mousedown", function(event) {
      alert("button clicked");
      if (event.button == 2) // Right Click
        event.stopPropagation();
    });
    // Event Listener on the paragraph element with it's logic:
    document.getElementById("demo").addEventListener("mousedown", function(event) {
      alert("Paragraph clicked");
    });
  </script>
</body>

</html>

Удаление an слушатель события от элемента

Чтобы удалить прослушиватель события из элемента, нам нужно вызвать removeEventListener метод с названием события и названием функции.

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

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

Если вы добились этого момента, вы должны иметь приличное понимание того, как работают прослушиватели событий в JavaScript.

Если при работе с любимой библиотекой/Frameworks вы когда-нибудь застряли в части обработки событий, то эти основы помогут вам решить проблему.

Добавить комментарий

Ваш адрес email не будет опубликован.