Cada estrutura JavaScript implementa manipulação de eventos entre navegadores, incentivando você a se afastar do estilo antigo de anexação in-line de eventos e usar uma abordagem linear simplificada. Dê uma olhada no exemplo jQuery na Listagem 6 que usa o evento hover para destacar um elemento div.
Listagem 6: Anexando o evento hover usando jQuery
$('#a-caixa').hover(function() {
$(this).addClass('destaque');
}, função() {
$(this).removeClass('destaque');
});
Este é um evento especial do jQuery e você descobrirá que ele fornece duas funções. A primeira é chamada quando o evento onMouseOver é acionado e a segunda função é chamada quando o evento onMouseOut é acionado. Isso ocorre porque não existe um evento DOM padrão para passar o mouse. Vejamos um evento mais típico como clique (confira a Listagem 7):
Listagem 7: Anexando eventos de clique usando jQuery
$('#o-botão').click(function() {
alert('Você apertou o botão!');
});
Como você pode ver, há apenas um parâmetro de função na instância. A maioria dos eventos em jQuery são tratados da mesma maneira, usando manipuladores de eventos em jQuery, o contexto refere-se a qual objeto acionou o evento. Algumas estruturas não funcionam dessa maneira. No caso do Prototype, o código na Listagem 7 se parece com a Listagem 8.
Listagem 8: Anexando eventos de clique usando Prototype
$('o botão').observe('clique', function(e) {
alert('Você apertou o botão!');
});
A primeira coisa que você notará é que não existe uma função click, mas uma função observe que aceita um parâmetro de evento antes de referenciar a si mesma. Você também notará que a função aceita um parâmetro e, onde o contexto se refere ao elemento que acionou o evento. Para ver como funciona, vamos reescrever o código da Listagem 6 usando Prototype (consulte a Listagem 9).
Listagem 9: Anexando eventos de foco usando Prototype
$('a caixa').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('destaque');
});
$('a caixa').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('destaque');
});
jQuery também é diferente, você só precisa usar a função $ para obter as variáveis de contexto, enquanto a biblioteca Prototype usa a função Event.element(). Além disso, você percebeu que precisa separar os eventos mouseover e mouseout.
Através de alguns dos tutoriais deste artigo, você pode ver que as funções são criadas inline e não nomeadas. Isso significa que ele não pode ser reutilizado, e o exemplo de foco do Prototype também nos dá a oportunidade de ver como usar funções nomeadas. A Listagem 10 ilustra esse método.
Listagem 10: Melhorando eventos de foco usando Prototype
Você notará que neste ponto você só precisa definir uma função. Ele é chamado pelos eventos mouseover e mouseout. Esta função determina se um elemento possui um nome de classe "destacado" e o adiciona ou remove com base no resultado. Você também notará que o parâmetro e é passado implicitamente. Em outras palavras, você passou um argumento ambíguo para a função observe.
Endereço de reimpressão: http://www.denisdeng.com/?p=720
Endereço original: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
function toggleClass(e) {
var el = Event.element(e);
if(el.hasClassName('destaque'))
row.removeClassName('destaque');
outro
row.addClassName('destaque');
}
$('a caixa').observe('mouseover', toggleClass);
$('a caixa').observe('mouseout', toggleClass);