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 click
evento, 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 click
evento do elemento botão, use o seguinte:
addEvent(btn, 'click', function (event) {
console.log('Button Clicked');
});
Linguagem de código: JavaScript ( javascript )
Anterior