MooTools - Tratamento de Eventos
Como os seletores, o gerenciamento de eventos também é um conceito essencial da MooTools. Este conceito é usado para criar eventos e ações para eventos. Também precisamos ter uma compreensão das ações e seus efeitos. Vamos tentar alguns eventos neste capítulo.
Único clique esquerdo
O evento mais comum em desenvolvimento web é o clique único com o botão esquerdo. Por exemplo, o Hyperlink reconhece um único evento de clique e leva você a outro elemento DOM. A primeira etapa é adicionar um evento de clique ao elemento DOM. Vejamos um exemplo que adiciona um evento de clique ao botão. Ao clicar nesse botão, uma mensagem será exibida.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//put whatever you want to happen in here
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>Você receberá a seguinte saída -
Resultado
Ao clicar no botão, você receberá a seguinte mensagem -
This button element recognizes the click eventEntrada e saída do mouse
Mouse Enter e Mouse Leave são os eventos mais comuns no tratamento de eventos. A ação é aplicada com base na posição do mouse. Se a posição do mouse for ENTER no elemento DOM, ele aplicará uma ação. Se ele deixar a área do elemento DOM, ele aplicará outra ação.
Vejamos um exemplo que explica como funciona o evento Enter do mouse. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse enter event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Se você mantiver o ponteiro do mouse sobre o botão, receberá a seguinte mensagem.
Recognizes the mouse enter eventVejamos um exemplo que explica como o evento Mouse Leave funciona. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse leave event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Se você mantiver o ponteiro do mouse sobre o botão, receberá a seguinte mensagem.
Recognizes the mouse leave eventRemover um Evento
Este método é usado para remover um evento. Remover um evento é tão fácil quanto adicionar um evento e segue a mesma estrutura. Dê uma olhada na seguinte sintaxe.
Sintaxe
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Teclas como entrada
MooTools pode reconhecer suas ações - o tipo de entrada que você forneceu através do elemento DOM. Usando okeydown função, você pode ler cada chave do elemento DOM do tipo de entrada.
Vejamos um exemplo em que existe um elemento de área de texto. Vamos agora adicionar um evento keydown à área de texto que sempre que a área de texto reconhecer qualquer keystore, ela responderá com uma mensagem de alerta imediatamente. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>Você receberá a seguinte saída -
Resultado
Tente inserir algo na área de texto. Você encontrará uma caixa de alerta junto com a mensagem a seguir.
This textarea can now recognize keystroke valueTente adicionar algum texto ao mesmo exemplo que lê o valor da textarea quando você inseriu nele. É possível usandoevent.keyfunção com o evento. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>Você receberá a seguinte saída -
Resultado
Tente inserir texto na área de texto. Você será direcionado para uma caixa de alerta junto com o valor inserido na área de texto.