Para adicionar um manipulador de eventos a um evento de um elemento, você usa o addEventListener()método do objeto elemento:
element.addEventListener(type,eventListener);Linguagem de código: CSS ( css )Suponha que você tenha um botão com a classe .btn:
<button class="btn">Subscribe</button>Linguagem de código: HTML, XML ( xml )Para anexar um manipulador de eventos ao clickevento, use o seguinte:
Primeiro, defina um manipulador de eventos:
function clickHandler(event) {
console.log('Button Clicked');
}Linguagem de código: JavaScript ( javascript )Em seguida, use o addEventListener()método do elemento botão:
const btn = document.querySelector('.btn');
btn.addEventListener('click', clickHandler);Linguagem de código: JavaScript ( javascript )Se você não estiver recuperando a função do manipulador de eventos, poderá usar uma função anônima como manipulador de eventos:
const btn = document.querySelector('.btn');
btn.addEventListener('click', function(event){
console.log('Button Clicked');
});Linguagem de código: JavaScript ( javascript )A maioria dos navegadores modernos suporta o addEventListener()método. No entanto, o IE8 usa o attachEvent()método.
Se precisar de suporte ao IE8, você pode criar uma função auxiliar:
function addEvent(el, type, handler) {
el.attachEvent ?
el.attachEvent('on' + type, handler) :
el.addEventListener(type, handler);
}Linguagem de código: JavaScript ( javascript )Para adicionar um manipulador de eventos ao clickevento do elemento botão, use o seguinte:
addEvent(btn, 'click', function (event) {
console.log('Button Clicked');
});Linguagem de código: JavaScript ( javascript )
Anterior
