Внутренние параметры для addEventListener и лучший подход к обработке событий

8/30 Решение и объяснение JS-задачи LeetCode

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

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

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

Давайте разобьем это еще больше на События и Прослушиватели.

Что такое события?

События — это то, что происходит в системе, которую вы программируете: система выдает (или «запускает») какой-то сигнал, когда происходит событие, и предоставляет механизм, с помощью которого действие может быть выполнено автоматически (то есть некоторый код, выполняющий ) при возникновении события. События запускаются внутри окна браузера и, как правило, привязаны к определенному элементу, который находится в нем. Это может быть отдельный элемент, набор элементов, HTML-документ, загруженный на текущей вкладке, или все окно браузера. Возможны различные типы событий.

Например:

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

Теперь подходит к следующему сроку

Что такое слушатели событий?

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

Теперь возникает естественный вопрос: что такое обработчики событий?
Итак, если вы помните, мы обсуждали обратные вызовы и то, как мы можем использовать функцию в качестве объектов первого класса для передачи внутри другой функции в качестве аргументов, аналогично тому, как eventListner может принимать обратный вызов. функция, которая является обработчиком событий, которая может выполнять некоторые операции.

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

Метод addEventListener() является рекомендуемым способом регистрации прослушивателя событий. Преимущества заключаются в следующем:

Это позволяет добавить более одного обработчика для события. Это особенно полезно для библиотек, модулей JavaScript или любого другого кода, который должен хорошо работать с другими библиотеками или расширениями.
В отличие от использования свойства onXYZ, оно дает более точное управление фазой, когда прослушиватель активирован (захват или всплытие).
Он работает с любой целью события, а не только с элементами HTML или SVG.

Метод addEventListener принимает несколько аргументов, основные из которых

type
Строка с учетом регистра, представляющая тип события для прослушивания.
listener
Объект, который получает уведомление (объект, реализующий интерфейс Event), когда происходит событие указанного типа. Это должно быть значение null, объект с методом handleEvent() или функция JavaScript. Подробную информацию о самом обратном вызове см. в разделе Обратный вызов прослушивателя событий.
options Необязательный
Объект, определяющий характеристики прослушивателя событий. Доступные варианты:

захват Необязательный
Логическое значение, указывающее, что события этого типа будут отправляться зарегистрированному слушателю до того, как они будут отправлены любому объекту EventTarget под ним в дереве DOM. Если не указано, по умолчанию имеет значение false.
Once Необязательный
Логическое значение, указывающее, что прослушиватель должен быть вызван не более одного раза после добавления. Если true, прослушиватель будет автоматически удален при вызове. Если не указано, по умолчанию имеет значение false.
пассивный Необязательный
Логическое значение, которое, если оно истинно, указывает, что функция, указанная слушателем, никогда не будет вызывать preventDefault(). Если пассивный слушатель вызовет preventDefault(), пользовательский агент ничего не сделает, кроме как выдаст консольное предупреждение. Если не указано, по умолчанию используется значение false, за исключением того, что в браузерах, отличных от Safari, по умолчанию используется значение true для событий колеса, колеса мыши, сенсорного запуска и сенсорного перемещения. Дополнительные сведения см. в разделе Повышение производительности прокрутки с помощью пассивных слушателей.
signal Необязательный
AbortSignal. Слушатель будет удален при вызове метода abort() данного объекта AbortSignal. Если не указано, AbortSignal не связан с прослушивателем.

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

Код

/**
 * @param {Function} fn
 * @return {Function}
 */
var once = function(fn) {
    let called = false
    return function(...args){
        if (called) return undefined;
        called = true
        return fn(...args)
    }
};
/**
 * let fn = (a,b,c) => (a + b + c)
 * let onceFn = once(fn)
 *
 * onceFn(1,2,3); // 6
 * onceFn(2,3,6); // returns undefined without calling fn
 */

Заключение

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

Предыдущая статья — https://varnitsharma-102.medium.com/what-is-polyfilling-in-javascript-and-how-does-callbacks-works-246719161e4a

Проблема — https://leetcode.com/problems/allow-one-function-call/description/

Внутренние параметры для addEventListener и лучший подход к обработке событий