JavaScript | addEventListener () с примерами

Опубликовано: 14 Декабря, 2021

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

AddEventListener () - это встроенная функция в JavaScript, которая принимает событие для прослушивания и второй аргумент, вызываемый при каждом запуске описанного события. К одному элементу можно добавить любое количество обработчиков событий без перезаписи существующих обработчиков событий.
Синтаксис:

 element.addEventListener (событие, слушатель);

Параметры:

event: событие может быть любым допустимым событием JavaScript. События используются без префикса «on», например, «click» вместо «onclick» или «mousedown» вместо «onmousedown».
слушатель (функция-обработчик): это может быть функция JavaScript, которая реагирует на событие.

Код JavaScript для демонстрации работы метода addEventListener ():
код №1:

 <!DOCTYPE html>
 <html>
 
<body>
    <button id= "try" >Click here</button>
    <h1 id= "text" ></h1>
    <script>
    document.getElementById( "try" ).addEventListener( "click" , function (){
    document.getElementById( "text" ).innerText = "GeeksforGeeks" ;
 });
    </script>
 </body>
 
</html>

Выход:
Прежде чем нажать кнопку «Щелкните здесь»:

После нажатия кнопки «Щелкните здесь»:

код №2:
В этом примере два события «mouseover» и «mouseout» добавляются к одному и тому же элементу. Если навести курсор мыши на текст, то происходит событие «наведение мыши» и вызывается функция RespondMouseOver, аналогично для события «mouseout» вызывается функция RespondMouseOut.

 <!DOCTYPE html>
 <html>
 
<body>
    <button id= "clickIt" >Click here</button>
 
    <p id= "hoverPara" >Hover over this Text !</p>
 
    <b id= "effect" ></b>
 
    <script>
        const x = document.getElementById( "clickIt" );
        const y = document.getElementById( "hoverPara" );
 
        x.addEventListener( "click" , RespondClick);
        y.addEventListener( "mouseover" , RespondMouseOver);
        y.addEventListener( "mouseout" , RespondMouseOut);
 
        function RespondMouseOver() {
            document.getElementById( "effect" ).innerHTML +=
                       "MouseOver Event" + "<br>" ;
        }
 
        function RespondMouseOut() {
            document.getElementById( "effect" ).innerHTML +=
                      "MouseOut Event" + "<br>" ;
        }
 
        function RespondClick() {
            document.getElementById( "effect" ).innerHTML +=
                      "Click Event" + "<br>" ;
        }
    </script>
 </body>
 
</html>

Выход:
Прежде чем нажать кнопку «Щелкните здесь» и навести курсор на текст:

После нажатия кнопки «Щелкните здесь» и наведения курсора на текст:

JavaScript JavaScript-Misc

JavaScript | addEventListener () с примерами

РЕКОМЕНДУЕМЫЕ СТАТЬИ