Respondendo a eventos

Transcrição

1 Respondendo a eventos Até agora, a maioria dos scripts que você escreveu foi executado de uma forma tranqüila e ordenada, movendo-se da primeira instrução para a última. Agora aprenderemos a utilizar a ampla variedade de handlers de evento suportados pelo JavaScript. Em vez de serem executados na ordem, os scripts que utilizam handlers de evento podem ser executados em qualquer ordem, pois a execução de cada um dependerá do evento que ocorreu naquele momento. Entendendo handlers de evento Os eventos são coisas que acontecem ao navegador o usuário dando um clique em um botão, o ponteiro do mouse movendo-se ou uma página da Web ou imagem se carregando do servidor. Uma ampla variedade de eventos permite que seus scripts respondam ao mouse, ao teclado e a outras circunstâncias. Logo, os programas do JavaScript não têm de executar na ordem, pois eles podem detectar eventos e reagir a eles. Os scripts que você utiliza para detectar e responder a um evento é chamado de handler de evento. Os handlers de evento estão entre os recursos mais poderosos do JavaScript. Objetos e eventos Já vimos antes que o JavaScript utiliza um conjunto de objetos para armazenar as informações sobre as várias partes de uma página da Web botões, links, imagens, janelas e assim por diante. Um evento freqüentemente pode acontecer em mais de um lugar (por exemplo, o usuário pode dar um clique em qualquer um dos links na página). Logo, cada evento é associado a um objeto. Por exemplo: o evento onmouseover ocorre quando o ponteiro de mouse move-se sobre um objeto na página. Quando o ponteiro move-se sobre um link particular, o evento onmouseover é enviado para aquele handler de evento do link, se ele tiver um. Para definir um handler de evento, você adiciona a palavra on no começo do nome do evento. Por exemplo, o handler de evento onmouseover é chamado quando o mouse move-se sobre um link. Para definir o handler de evento, você o adiciona a essa tag HTML <A> do link particular. obs:notação padrão para handlers de evento. O on é sempre escrito em letras minúsculas. E Nemer 1 / 6

2 Criando um handler de evento Não é necessária a tag <SCRIPT> para definir um handler de evento. Em vez disso, você adiciona um atributo de handler de evento em uma tag individual de HTML. Por exemplo, eis um link que inclui um onmouseover ao handler de evento: <A HREF= http: // onmouseover= window.alert( Você está se movendo sobre o link. ); clique aqui</a> Note que isso tudo é uma tag <A>, embora esteja dividido em múltiplas linhas. Ela especifica uma instrução a ser utilizada como o handler de evento onmouseover para o link (exibe uma mensagem de alerta quando o mouse move-se sobre o link). Se você precisar de mais de uma instrução, utilize uma função. Defina a função no cabeçalho do documento e então chame a função como o handler de evento, como mostrado abaixo: <A HREF= http: // onmouseover= Processa( ); > Mova o mouse sobre este link</a> Alterando os handlers de evento com JavaScript Em vez de especificar um handler de evento em um documento de HTML, você pode utilizar JavaScript para designar uma função como um handler de evento. Isso permite configurar handlers de evento condicionalmente e ativa-los e desativa-los, assim como alterar a função que trata um evento dinamicamente. Para definir um handler de evento dessa maneira, primeiro defina uma função e depois a designe como um handler de evento. os handlers de evento são armazenados como propriedades do objeto document ou outro objeto que pode receber um evento. Por exemplo, o script seguinte define uma função chamada mousealert e então a atribui como o handler de evento onmousedown ao documento. function mousealerta( ) { alert("você clicou o mouse!"); document.onclick=mousealerta; E Nemer 2 / 6

3 Utilizando o objeto event O objeto event é um objeto especial cujas propriedades oferecem a você mais informações sobre o evento que ocorreu. As seguintes propriedades estão disponíveis: type é o tipo de evento que ocorreu (ex: mouseover); target é o objeto de destino para o evento (ex: um documento em um link); button é um valor numérico que especifica o botão do mouse que foi clicado para eventos de mouse ou a tecla foi pressionada para eventos do teclado; modifiers é uma lista de teclas de modificador que foram pressionadas durante um evento de teclado ou de mouse (ex: Alt, Ctrl e Shift); data é uma lista de dados arrastados e soltos para eventos de arrastar e soltar; pagex e pagey são a posição X e Y do mouse quando o evento ocorreu, medida do canto superior esquerdo da página; layerx e layery são a posição X e y do mouse, medida do canto superior esquerdo da camada atual.; e screenx e screeny são a posição X e Y do mouse, medida do canto superior esquerdo da tela. Utilizando eventos de mouse O JavaScript inclui um número de handlers de evento para detectar ações de mouse. Seu script pode detectar o movimento do ponteiro do mouse e quando um botão é clicado, é liberado ou ambos. O evento onmouseout ocorre quando o ponteiro de mouse é movido para fora da borda do objeto. O evento onclick é chamado quando o botão do mouse é clicado enquanto posicionado sobre o objeto apropriado. Por exemplo, você pode utilizar o seguinte handler de evento para exibir um alerta quando um link é clicado: <title> Exemplo de eventos </title> <A HREF=" onclick="alert ('Você está saindo deste site.');"> Clique aqui</a> E Nemer 3 / 6

4 No exemplo anterior, o handler de evento onclick executa antes de a página vinculada ser carregada no navegador. Isso é útil para tornar o link condicional ou para exibir uma nota de isenção de responsabilidade antes de carregar a página vinculada. Se o seu handler de evento onclick retorna o valor false, o link não será seguido. Por exemplo, o script seguinte exibe uma caixa de diálogo de confirmação. Se você der um clique em Cancel, o link não é seguido; se der um clique em OK, a nova página é carregada: <title> Exemplo de eventos </title> <A HREF=" onclick="return(window.confirm('tem certeza?'));"> Clique aqui</a> O exemplo anterior utiliza a instrução return no handler de evento. Isso assegura que o valor false, que é retornado quando o usuário dá um clique em Cancel, é retornado do handler de evento, o que evita que o link seja seguido. O handler de evento ondblclick é semelhante, mas é utilizado somente quando o usuário dá um clique duplo em um objeto. Como os links normalmente exigem somente um único clique, você pode utilizar isso para fazer um link realizar duas coisas diferentes, dependendo do número de cliques. O evento onmousedown é utilizado quando o usuário pressiona o botão do mouse. O evento onmouseup é utilizado quando o usuário solta o botão do mouse. Os dois eventos anteriores são as duas metades de um clique de mouse. Para detectar qual o botão do mouse foi pressionado, você pode utilizar a propriedade button do objeto event. Essa propriedade recebe o valor 1 para o botão esquerdo ou 2 para o botão direito. Essa propriedade é atribuída aos eventos onclick, ondblclick, onmouseup e onmousedown. O exemplo abaixo exibe um alerta com o botão pressionado pelo usuário. E Nemer 4 / 6

5 <title> Exemplo de eventos - pág. 144</title> <script language="javascript"> function indicabotao( ) { tipodobotao = (event.button == 1)? "esquerdo" : "direito"; mensagem = "Clicou o botão "+ tipodobotao ; alert(mensagem); document.onmousedown = indicabotao; </script> Utilizando eventos de teclado O principal handler de evento para esse propósito é onkeypress, que ocorre quando uma tecla é pressionada e liberada ou é mantida pressionada. O evento onkeydown detecta quando a tecla foi pressionada. O evento onkeyup detecta quando a tecla foi liberada. O exemplo abaixo mostra um script que exibe na tela o código decimal da tecla que foi apertada. <title> Exemplo de eventos - pág. 144</title> <body onkeypress="window.alert('clicou em '+ (event.keycode));" > E Nemer 5 / 6

6 <title>new Page 1</title> <script language="javascript"> function mostra(text) { window.status=text; return true; function limpastatus( ) { window.status=""; </script> <h1>links descritivos</h1> <p>mova o mouse para ver uma descrição:</p> <ul> <li><a href="formuláriopedido.html" onmouseover="mostra('encomende um produto'); return true;" onmouseout = "limpastatus( ) ;"> Formulário de Pedido</a> <li><a href=" .html" onmouseover="mostra('envie-nos uma mensagem'); return true;" onmouseout = "limpastatus( ) ;"> </a> <li><a href="order.html" onmouseover="mostra('tem alguma reclamação?'); return true;" onmouseout = "limpastatus( ) ;"> Reclamações</a> </ul> E Nemer 6 / 6