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

Автор оригинала: Honey Thakuria.

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

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

Документ и окно объекты и добавление Слушатели событий им.
Event.PreventDefault () Метод и это использование.
Event.StopPropagation () Способ с примером.
Как удалить событие Слушатель из элемента.

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

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

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

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

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

Есть еще один способ под названием «На» недвижимость OnClick, OnMouseover и так далее. Но не так полезно, так как он не позволяет нам добавлять несколько слушателей событий на одном элементе. Другие методы позволяют этому.

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

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

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

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

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

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

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

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

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

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

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

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

Документ состоит из того, что находится внутри внутреннего окна. Документ объект является корнем каждого узла в доме. Если вы загружаете HTML-страницу в браузере, то документ представляет эту целую страницу.

Метод event.preventdefault () и его использование

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

Пример : Нажатие на анкерный элемент сделает браузер перенаправить на эту страницу по умолчанию. Давайте попробуем избежать этого.





  Google

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

Метод Event.Propagation ()

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

Звучит бит с толку, но я надеюсь, что приведен ниже пример даст вам понятно.

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

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

Решение:

Hello Ho

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

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

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

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

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

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

Оригинал: “https://www.freecodecamp.org/news/event-handling-in-javascript-with-examples-f6bc1e2fff57/”