Entrar
Cadastre-se
Início1
Eventos em Javascript: Tratando eventos Sex Dez 07, 2012 8:24 pm
Quakeline
Minis : 
:00
:00
:00
:00:00:00Mensagens : 257
Olá,
Eventos são procedimentos executados em consequência a uma ação. Por exemplo, quando o usuário clica em um botão, é disparado um evento deste elemento chamado “click”. Quando se pressiona uma tecla sobre outro elemento, é disparado um evento chamado “keydown” e quando a tecla é solta, o evento “keyup” é disparado.
Várias ações, não só na interface gráfica, fazem com que eventos sejam disparados. Então, sabendo que algo é feito quando certas ações são executadas, pode ser interessante e necessário ter controle sobre esta situação. Nesse ponto entra o TRATAMENTO DE EVENTOS, que consiste em definir o que será feito quando um determinado evento for disparado.
Algumas linguagens que possuem ambientes de desenvolvimento RAD (Rapid Application Development) permitem acessar esses eventos de forma bastante prática, através da interface gráfica do IDE. Porém, às vezes é preciso controlar esses eventos apenas pelo código, sem auxílio de ambiente gráfico, o que é muito comum para a linguagem Javascript. Por isso é importante conhecer a sintaxe da linguagem para esse tipo de ação.
O tratamento de eventos geralmente é feito a partir de funções nas quais se implementa o código que deve ser executado quando o evento ocorrer. Essas funções são chamadas de “event handlers” (tratadores de evento).
A seguir veremos como efetuar o tratamento de eventos de elementos como botões e inputs HTML a partir de um script Javascript, garantindo uma maior interação com o usuário.
Tratando eventos diretamente nas propriedades
A linguagem Javascript permite que o código a ser executado em um evento seja informado diretamente na propriedade que lhe dá acesso. Essa forma é utilizada quando se tem poucas instruções a serem executadas e quando as expressões são curtas e de fácil compreensão.
Na listagem a seguir adicionamos um código à propriedade onclick de um botão para que seja exibida uma mensagem quando o usuário clicar sobre ele.
Listagem 1: Tratando clique do botão na propriedade
É importante notar que foram utilizadas aspas duplas para definir o valor da propriedade e aspas simples internamente. Essa é a sintaxe da HTML para essas situações, sempre que se necessitar usar aspas dentro do código, essas devem ser simples, pois as duplas são usadas externamente.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Figura 1: Código executado direto na propriedade do evento
Como vimos, apenas uma instrução foi executada e por isso foi simples e eficiente colocar o código direto na tag. Porém, caso existissem outras expressões a serem executadas, com cálculos e outros processamentos, se tornaria inviável escrever tudo no interior da propriedade. Para esses casos, veremos que é possível criar uma função (event handler) e chamá-la a partir da propriedade de evento.
Definindo event handlers
Os event handlers, como já foi dito, são funções que contém o código a ser executado na ocorrência de um evento. Em Javascript, podemos criar uma função utilizando a sintaxe padrão e fazer a chamada a essa função na propriedade de evento, informando seu nome e possíveis parâmetros no lugar onde se colocaria o código diretamente (caso da Listagem 1).
Na Listagem 2 criamos uma função chamada “exibirMensagem” que apresenta uma caixa de diálogo (alert) com a data atual. Nessa função foram usadas apenas duas linhas de código, mas fica claro que caso fosse preciso, várias outras instruções poderiam ser executadas.
Listagem 2: Tratando o evento com uma função
Ao clicar no botão, a função é chamada e o resultado é o que se vê na Figura 2.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Figura 2: Código executando dentro de uma função
Tratando eventos com a função addEventListener
A função “addEventListener”, nativa da linguagem Javascript, permite ligar um evento de um objeto a uma função que fará seu tratamento. Usando essa função, não é preciso definir a propriedade de evento do objeto diretamente, pois isso será feito via código, dinamicamente. No exemplo a seguir, temos a mesma função exibir mensagem, mas dessa vez a ligamos ao evento click do botão usando a addEventListener.
Listagem 3: Usando a função addEventListener
Nesse caso foi preciso usar a função “getElementById” para selecionar o objeto cujo evento seria tratado, no caso, o botão.
O primeiro parâmetro da addEventListener é o nome do evento que será tratado, nesse caso, “click”. O segundo é o nome da função que será executada.
Essa forma dá mais flexibilidade ao código, pois deixa o código HTML independente do Javascript. Todas as modificações necessárias são feitas no script, sem precisar alterar a tag.
Conclusão
Ao longo desse artigo pudemos ver que o tratamento de eventos na linguagem Javascript é consideravelmente simples e flexível, podendo ser feito de várias formas.
Fonte : [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Até a próxima.
Eventos são procedimentos executados em consequência a uma ação. Por exemplo, quando o usuário clica em um botão, é disparado um evento deste elemento chamado “click”. Quando se pressiona uma tecla sobre outro elemento, é disparado um evento chamado “keydown” e quando a tecla é solta, o evento “keyup” é disparado.
Várias ações, não só na interface gráfica, fazem com que eventos sejam disparados. Então, sabendo que algo é feito quando certas ações são executadas, pode ser interessante e necessário ter controle sobre esta situação. Nesse ponto entra o TRATAMENTO DE EVENTOS, que consiste em definir o que será feito quando um determinado evento for disparado.
Algumas linguagens que possuem ambientes de desenvolvimento RAD (Rapid Application Development) permitem acessar esses eventos de forma bastante prática, através da interface gráfica do IDE. Porém, às vezes é preciso controlar esses eventos apenas pelo código, sem auxílio de ambiente gráfico, o que é muito comum para a linguagem Javascript. Por isso é importante conhecer a sintaxe da linguagem para esse tipo de ação.
O tratamento de eventos geralmente é feito a partir de funções nas quais se implementa o código que deve ser executado quando o evento ocorrer. Essas funções são chamadas de “event handlers” (tratadores de evento).
A seguir veremos como efetuar o tratamento de eventos de elementos como botões e inputs HTML a partir de um script Javascript, garantindo uma maior interação com o usuário.
Tratando eventos diretamente nas propriedades
A linguagem Javascript permite que o código a ser executado em um evento seja informado diretamente na propriedade que lhe dá acesso. Essa forma é utilizada quando se tem poucas instruções a serem executadas e quando as expressões são curtas e de fácil compreensão.
Na listagem a seguir adicionamos um código à propriedade onclick de um botão para que seja exibida uma mensagem quando o usuário clicar sobre ele.
Listagem 1: Tratando clique do botão na propriedade
- Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button id="btn" onclick="alert('Seja bem vindo(a) ao Linha de Código.')">Clique aqui</button>
</body>
</html>
É importante notar que foram utilizadas aspas duplas para definir o valor da propriedade e aspas simples internamente. Essa é a sintaxe da HTML para essas situações, sempre que se necessitar usar aspas dentro do código, essas devem ser simples, pois as duplas são usadas externamente.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Figura 1: Código executado direto na propriedade do evento
Como vimos, apenas uma instrução foi executada e por isso foi simples e eficiente colocar o código direto na tag. Porém, caso existissem outras expressões a serem executadas, com cálculos e outros processamentos, se tornaria inviável escrever tudo no interior da propriedade. Para esses casos, veremos que é possível criar uma função (event handler) e chamá-la a partir da propriedade de evento.
Definindo event handlers
Os event handlers, como já foi dito, são funções que contém o código a ser executado na ocorrência de um evento. Em Javascript, podemos criar uma função utilizando a sintaxe padrão e fazer a chamada a essa função na propriedade de evento, informando seu nome e possíveis parâmetros no lugar onde se colocaria o código diretamente (caso da Listagem 1).
Na Listagem 2 criamos uma função chamada “exibirMensagem” que apresenta uma caixa de diálogo (alert) com a data atual. Nessa função foram usadas apenas duas linhas de código, mas fica claro que caso fosse preciso, várias outras instruções poderiam ser executadas.
Listagem 2: Tratando o evento com uma função
- Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
function exibirMensagem()
{
var data = new Date();
alert(data.toString());
}
</script>
</head>
<body>
<button id="btn" onclick="exibirMensagem();">Clique aqui</button>
</body>
</html>
Ao clicar no botão, a função é chamada e o resultado é o que se vê na Figura 2.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Figura 2: Código executando dentro de uma função
Tratando eventos com a função addEventListener
A função “addEventListener”, nativa da linguagem Javascript, permite ligar um evento de um objeto a uma função que fará seu tratamento. Usando essa função, não é preciso definir a propriedade de evento do objeto diretamente, pois isso será feito via código, dinamicamente. No exemplo a seguir, temos a mesma função exibir mensagem, mas dessa vez a ligamos ao evento click do botão usando a addEventListener.
Listagem 3: Usando a função addEventListener
- Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button id="btn">Clique aqui</button>
<script type="text/javascript">
function exibirMensagem()
{
var data = new Date();
alert(data.toString());
}
var btn = document.getElementById("btn");
btn.addEventListener("click", exibirMensagem);
</script>
</body>
</html>
Nesse caso foi preciso usar a função “getElementById” para selecionar o objeto cujo evento seria tratado, no caso, o botão.
O primeiro parâmetro da addEventListener é o nome do evento que será tratado, nesse caso, “click”. O segundo é o nome da função que será executada.
Essa forma dá mais flexibilidade ao código, pois deixa o código HTML independente do Javascript. Todas as modificações necessárias são feitas no script, sem precisar alterar a tag.
Conclusão
Ao longo desse artigo pudemos ver que o tratamento de eventos na linguagem Javascript é consideravelmente simples e flexível, podendo ser feito de várias formas.
Fonte : [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Até a próxima.
