Зачем нужен и у кого он есть метод addEvevntListener?

Question 1

Зачем нужен и у кого он есть метод addEvevntListener?

Answer 1

Метод addEventListener - это самый функциональный способ позволяющий добавить обработчик события к указанному элементу и запустить выполнение программы при совершении заданного действия. Получить информацию о сигналах браузера можно из Document (DOM), Element, Window и других объектов поддерживающих события.

addEventListener() является одних из трёх способом прослушивать события, наряду с добавление атрибута к тегам в HTML и обращения к свойствам объекта напрямую.
<!-- добавление атрибута -->
<button>Хочу стать программистом!</button>

<script>
    const myFirstEvent = document.querySelector('button');
    
    // обращаемся к свойству напрямую
    myFirstEvent.onclick = function() {     
        alert('Да будет так!');
    }
    
    // используем метод addEventListener
    myFirstEvent.addEventListener('click', function() {
        alert('Дорогу осилит идущий');
    })
</script>  

addEventListener() имеет важное преимущество перед остальными способами, метод позволяет навесить несколько обработчиков на одно событие. Это происходит из-за того, что у объекта только одно свойство, например с именем onclick (клик) или mousemove (движение мыши) и если обратиться к одному из них напрямую несколько раз, второй обработчик перезапишет первый.

В примере выше, как раз можно наблюдать описанный эффект - модальное окно с Да будет так! появится, а вот Терпение и труд всё перетрут нет.

Также отследить некоторые события можно только с помощью addEventListener(), например навесить обработчик на DOMContentLoaded по другому не получиться.
______________________________________________________________________________________
element.addEventListener(eventType, handler, options);

element - объект, действие по которому отслеживаем.

eventType - тип события, которое мы хотим отследить: клик, прокрутка мыши, нажатие клавиши и т.д. Написание чувствительно к регистру: click правильно, Click или CLICK неправильно.

handler - имя функции или сама функция, которая будет выполнена после наступления события.

options - необязательный объект со свойствами, внутри которого доступны следующие параметры:

capture: значение записывается в формате true или false и задает этап, на котором будет обработано событие. По умолчанию false - на этапе всплытия, true - на этапе погружения (перехват). Если вместо options задать булево значение - это будет равносильно {capture: false/true}

once: значение типа boolean, по умолчанию false, если true тогда обработчик будет удален после выполнения.

passive: по умолчанию false, если true обработчик никогда не вызовет preventDefault(), взамен этого будет сгенерировано предупреждение в console.

<button>В скором времени я стану JavaScript middle</button>

<script>
    const clickButton = document.querySelector('button');
    clickButton.addEventListener('click', showMessage, {
        capture: false,
        once: true,
        passive: false,
    })
    
    function showMessage() {
        alert('У тебя все получиться, я в тебя верю!');
    }
</script>

При клике на кнопку мы получим модальное окно с сообщением, если кликнуть второй раз ничего не произойдет, так как свойство once равно true - после события обработчик удаляется.