Добавление обработчика события

Чтобы добавить обработчик события к событию элемента, вы используете метод addEventListener() объекта элемента:

element.addEventListener(type,eventListener);
Code language: CSS (css)

Предположим, у вас есть кнопка с классом .btn:

<button class="btn">Subscribe</button>
Code language: HTML, XML (xml)

Чтобы прикрепить обработчик события к событию click, вы используете следующее:

Сначала определите обработчик события:

function clickHandler(event) { console.log('Button Clicked'); }
Code language: JavaScript (javascript)

Затем используйте метод addEventListener() элемента button:

const btn = document.querySelector('.btn'); btn.addEventListener('click', clickHandler);
Code language: JavaScript (javascript)

Если вы не хотите использовать функцию обработчика события, вы можете использовать анонимную функцию в качестве обработчика события:

const btn = document.querySelector('.btn'); btn.addEventListener('click', function(event){ console.log('Button Clicked'); });
Code language: JavaScript (javascript)

Большинство современных веб-браузеров поддерживают метод addEventListener(). Однако в IE8 вместо него используется метод attachEvent().

Если вам необходимо поддерживать IE8, вы можете создать вспомогательную функцию:

function addEvent(el, type, handler) { el.attachEvent ? el.attachEvent('on' + type, handler) : el.addEventListener(type, handler); }
Code language: JavaScript (javascript)

Чтобы добавить обработчик события к событию click элемента button, вы используете следующее:

addEvent(btn, 'click', function (event) { console.log('Button Clicked'); });
Code language: JavaScript (javascript)

Оцените статью
devanswers.ru
Добавить комментарий