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!

Anúncios

4 Responses to 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. 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 um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: