Eventos em Javascript – Parte 2

Guys, disse que ia falar sobre tratamentos de evento também, mas num vai dá, vo deixa para a 3ª Parte. Esse post é sobre o modelo Avançado de registro de Eventos em Javascript, continuação do post "Eventos em Javascript – Parte 1" em que eu falei sobre outros modelos.

Modelo Avançado

A W3C e a Microsoft desenvolveram maneiras de se adicionar um evento a algum elemento de forma mais controlada do que no modelo Tradicional.

W3C

A W3C documentou o "addEventListener". Ele recebe três parametros, o primeiro é qual tipo de evento sera adicionado (sem o "on", ex: "onclick" => "click"), depois a função que será executado e depois como o evento será disparado, falarei sobre isso depois mas por agora é basicamente o seguinte: Se clicarem em um elemento (1) dentro de outro (2), se o 2 estiver configurado para "true" (capturing) ele sera executado primeiro, agora ele executa o evento do elemento 1, e, agora, se o 2 estivesse configurado em "false" (bubbling) seria executado.

node.addEventListener("click", fnc, false)
node.addEventListener("click", fnc2, true)

A W3C não assume qual evento será disparado primeiro, porém os dois serão disparados. Para remover um evento é fácil também:

node.removeEventListener("click", fnc, false)

Ele removerá somente a função "fnc". Podemos usar a palavra-chave "this" para se referir ao elemento.

Microsoft

A Microsoft como sempre desenvolveu seu próprio método de se registrar eventos. A sintaxe do "attachEvent" é quase a mesma, mas tem algumas diferenças: na hora de declarar o tipo de evento se usa a palavra "on", e o modo que o evento dispara é sempre "bubbling".

node.attachEvent("onclick", fnc)
node.attachEvent("onclick", fnc2)

Para remover algum evento:

node.detachEvent("onclick", fnc)

As diferenças são poucas porém cruciais, ainda tem mais uma coisa, no modelo da Microsoft a palavra-chave "this" não se refere ao elemento o qual o evento foi disparado. Esse modelo é suportado do IE 5 pra cima.

Por hoje é só (huahau), já falamos sobre os modelos de registro de eventos. Agora falta falar sobre tratamento, disparo de eventos e mais algumas coisas.
Flwss!

4 Respostas para “Eventos em Javascript – Parte 2”

  1. JulioGreff Disse:

    Boa, mas esse eu já sabia. Ainda to lendo a primeira parte. Podia ter colocado aquela funçãozinha clássica pra attach/dettach. Mas tá beleza, bem vindo de volta.

  2. Ramon Disse:

    Coloquei um post parecido com esse no meu blog há algum tempo, isso é legal, pois é mais uma maneira de você separar comportamento de estrutura ;).

    fuiii…

  3. Bernardo Rufino Disse:

    Julio,
    Flwss, em outro post colocarei.

    Ramon,
    É, eu vi sim, no último post eu colocarei as fontes, e acho que tirei algo do seu também! Flwss

  4. Dennin Dalke Disse:

    ”’Se clicarem em um elemento (1) dentro de outro (2), se o 2 estiver configurado para “true” (capturing) ele sera executado primeiro, agora ele executa o evento do elemento 1, e, agora, se o 2 estivesse configurado em “false” (bubbling) seria executado.”’

    Meu caneco, eu vou pro hospício depois de ler isso hehehehehe

Deixe uma resposta