Introdução
Este capítulo descreve o Modelo de Eventos do DOM. A interface de Eventos é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e event listeners, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.
Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em DOM Level 3 Events draft.
Registrando event listeners
Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.
EventTarget.addEventListener
// Assuming myButton is a button element
myButton.addEventListener('click', greet, false)
function greet(event){
// print and have a look at the event object
// always print arguments in case of overlooking any other arguments
console.log('greet:', arguments)
alert('hello world')
}
Este é o método que você deve usar em páginas web modernas.
Nota: Internet Explorer 6–8 não suportavam este método, oferecendo uma API EventTarget.attachEvent
parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.
Mais detalhes podem encontrada na página de referência EventTarget.addEventListener
.
atributo HTML
<button onclick="alert('Hello world!')">
O código JavaScript no atributo é passado para o objeto Evento através do parâmetro event
. O valor return é tratado de uma maneira especial, descrita na especificação HTML.
Cuidado: Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.
DOM element properties
// Supondo que myButton seja um elemento button
myButton.onclick = function(event){alert('Hello world')}
A função pode ser definida para receber um parâmetro event
. O valor return é tratado de maneira especial, descrita na especificação HTML.
O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.
Acessando interfaces doEvento
Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o window
object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.
A interface Event
é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.
function print(evt) {
// the evt parameter is automatically assigned the event object
// take care of the differences between console.log & alert
console.log('print:', evt)
alert(evt)
}
// any function should have an appropriate name, that's what called semantic
table_el.onclick = print