05/07/13

Trabalhando com eventos em JavaScript

Tecnologias

Revistas

Cursos LO GIN:

Pocket videos SENHA:

DevWare

Frum

Servios

Publicar

Compre Crditos

Loja Virtual

A ssine

Bem vindo a DevMedia!

Esque ci m inha se nha

C adastre -se

post favorito

comentrios

Trabalhando com eventos em JavaScript

Veja nesse artigo como trabalhar com alguns tipos de eventos na linguagem JavasScript.

Curtir

Go s t ei (0)

(0)

JavaScript uma linguagem que cada vez mais vem crescendo e caindo no gosto popular. Com o passar do tempo, foram se tornando conhecidas as inmeras coisas que eram possveis de serem realizadas com essa linguagem, ento por isso que ela cada vez mais ganha mais adeptos. No artigo de hoje iremos entender um pouco o que so e como funcionam os eventos em JavaScript.

O que so eventos?
Os eventos so basicamente um conjunto de aes que so realizadas em um determinado elemento da pgina web, seja ele um texto, uma imagem, ou uma div, por exemplo. Muitas das interaes do usurio que est visitando sua pgina com o contedo do seu site podem ser consideradas eventos. Existe uma infinidade de eventos definidos para uso em JavaScript, abaixo podemos ver alguns dos principais e mais utilizados:

onBlur onChange onClick onFocus onKeyPress onLoad onMouseOver onMouseOut onSubmit

remove o foco do elemento muda o valor do elemento o elemento clicado pelo usurio o elemento focado o usurio pressiona uma tecla sobre o elemento carrega o elemento por completo define ao quando o usurio passa o mouse sobre o elemento define ao quando o usurio retira o mouse sobre o elemento define ao ao enviar um formulrio

Como usar os eventos

Existem diversas maneiras de se aplicar esses eventos aos elementos HTML, so elas: Inline Em um arquivo externo, usando um manipulador de eventos

Evento Inline
Vamos ver um exemplo de como usar um evento de maneira inline em JavaScript. Dessa forma preciso que tudo seja definido diretamente na tag do elemento, dessa forma: Listagem 1: Eventos inline JavaScript

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < t i t l e > U s a n d ooe v e n t oo n C l i c kn oJ a v a s c r i p t < / t i t l e >

www.devmedia.com.br/trabalhando-com-eventos-em-javascript/28521

1/5

05/07/13
< / h e a d > < b o d y >

Trabalhando com eventos em JavaScript

< h 1o n c l i c k = " t h i s . i n n e r H T M L = ' I s s oa c o n t e c eq u a n d ou s a m o soe v e n t oo n C l i c k ! ' " > C l i q u en e s s el i n kp a r at e s t a roe v e n t oo n C l i c k ! < / h 1 > < / b o d y > < / h t m l >

No exemplo anterior ns vimos de maneira inline como utilizar o evento onclick.

Usando evento externo

Para chamar um evento externo iremos precisar de um manipulador de eventos, nesse caso vamos usar o event listener que adiciona ou remove um evento sobre qualquer elemento. O Event Listener disponibiliza duas funes principais, so elas: addEvent - Adiciona uma funo que ser disparada quando ocorrer determinado evento no objeto. removeEvent - Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso. Agora vamos ver um exemplo de como utilizar o Event Listener. Listagem 2: Usando Event Listener

< s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " / p a t h / t o / e v e n t l i s t e n e r . j s " > < / s c r i p t > < f o r m > < i n p u tt y p e = " t e x t "n a m e = " a "/ > < i n p u tt y p e = " s u b m i t "/ > < / f o r m > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > v a rf=d o c u m e n t . f o r m s [ 0 ] ; a d d E v e n t ( f ," s u b m i t " ,f u n c t i o n (e){a l e r t ( f . a . v a l u e ) ; r e t u r nf a l s e ;} ) ; a d d E v e n t ( f . a ," k e y u p " ,f u n c t i o n (e){f . a . v a l u e = f . a . v a l u e . t o U p p e r C a s e ( ) ;} ) ; < / s c r i p t >

Dessa forma nosso formulrio fica limpo e sem cdigo JavaScript, sendo feita toda a validao de forma externa.

Alguns exemplos
No exemplo 1 vimos como utilizar o evento onClick, abaixo iremos ver alguns mais exemplos de eventos e como us-los.

onLoad
O evento onload pode ser usado quando queremos que algo seja carregado junto com o carregamento da pgina. Listagem 3: usando evento onLoad

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < t i t l e > U s a n d oe v e n t o sn oJ a v a s c r i p t < / t i t l e > < / h e a d > < b o d yo n l o a d = " c h e c k C o o k i e s ( ) " > < s c r i p t > f u n c t i o nc h e c k C o o k i e s ( ) { i f( n a v i g a t o r . c o o k i e E n a b l e d = = t r u e ) { a l e r t ( " C o o k i e ss op e r m i t i d o s " ) } e l s e { a l e r t ( " C o o k i e sn os op e r m i t i d o s " ) } } < / s c r i p t > < p > I r a p a r e c e ru ma l e r td i z e n d os eo sc o o k i e se s t oo un ol i b e r a d o se ms e un a v e g a d o r < / p > < / b o d y > < / h t m l >

www.devmedia.com.br/trabalhando-com-eventos-em-javascript/28521

2/5

05/07/13

Trabalhando com eventos em JavaScript

onChange
O evento onChange utilizado para que seja realizada determinada ao aps alguma mudana. No exemplo abaixo iremos fazer essa mudana acontecer ao clicarmos fora do input text. Listagem 4: Evento onChange

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < t i t l e > U s a n d oe v e n t o sn oJ a v a s c r i p t < / t i t l e > < s c r i p t > f u n c t i o nm y F u n c t i o n ( ) { v a rx = d o c u m e n t . g e t E l e m e n t B y I d ( " f n a m e " ) ; x . v a l u e = x . v a l u e . t o U p p e r C a s e ( ) ; } < / s c r i p t > < / h e a d > < b o d y > I n s i r as e uN o m e :< i n p u tt y p e = " t e x t "i d = " f n a m e "o n c h a n g e = " m y F u n c t i o n ( ) " > < p > A oc l i c a r m o sf o r ad oi n p u tt e x tot e x t oe s c r i t on e l ef i c a r t o d oe mc a i x aa l t a . < / p > < / b o d y > < / h t m l >

onMouseOver e onMouseOut
Esses eventos so responsveis pelas aes que o usurio faz com o mouse, passando o mouse no elemento e tirando o mouse do elemento, respectivamente. Listagem 5: Eventos onmouseover e onmouseout

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < t i t l e > U s a n d oe v e n t o sn oJ a v a s c r i p t < / t i t l e > < / h e a d > < b o d y > < d i vo n m o u s e o v e r = " m O v e r ( t h i s ) "o n m o u s e o u t = " m O u t ( t h i s ) "s t y l e = " b a c k g r o u n d c o l o r : # D 9 4 A 3 8 ; w i d t h : 1 2 0 p x ; h e i g h t : 2 0 p x ; p a d d i n g : 4 0 p x ; " > P a s s eom o u s ee mm i m < / d i v > < s c r i p t > f u n c t i o nm O v e r ( o b j ) { o b j . i n n e r H T M L = " O b r i g a d o " } f u n c t i o nm O u t ( o b j ) { o b j . i n n e r H T M L = " P a s s eom o u s ee mm i m " } < / s c r i p t > < / b o d y > < / h t m l >

onmousedown, onmouseup e onclick

Nesse exemplo iremos ver como trabalhar com o clique, o segurar o clique e o soltar do clique. Listagem 6: Eventos onmousedown, onmouseup e onclick

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < t i t l e > U s a n d oe v e n t o sn oJ a v a s c r i p t < / t i t l e > < / h e a d > < b o d y >

www.devmedia.com.br/trabalhando-com-eventos-em-javascript/28521

3/5

05/07/13

Trabalhando com eventos em JavaScript

< d i vo n m o u s e d o w n = " m D o w n ( t h i s ) "o n m o u s e u p = " m U p ( t h i s ) "s t y l e = " b a c k g r o u n d c o l o r : # D 9 4 A 3 8 ; w i d t h : 9 0 p x ; h e i g h t : 2 0 p x ; p a d d i n g : 4 0 p x ; " > C l i q u ea q u i < / d i v > < s c r i p t > f u n c t i o nm D o w n ( o b j ) { o b j . s t y l e . b a c k g r o u n d C o l o r = " # 1 e c 5 e 5 " ; o b j . i n n e r H T M L = " S o l t eoc l i q u e " } f u n c t i o nm U p ( o b j ) { o b j . s t y l e . b a c k g r o u n d C o l o r = " # D 9 4 A 3 8 " ; o b j . i n n e r H T M L = " O b r i g a d o " } < / s c r i p t > < / b o d y > < / h t m l >

Concluso
por essas e outras que o JavaScript vem se tornando cada vez mais famoso e ganhando cada vez mais adeptos. No artigo de hoje vimos como trabalhar com alguns dos eventos mais utilizados, com a leitura dele eu tenho certeza que voc vai conseguir aplic-los em seus projetos e ir alimentar ainda mais a vontade de aprender essa maravilhosa linguagem dentro de vocs. Espero que tenham gostado e at o prximo artigo.

Ricardo Arrigoni
Desenvolvedor Front-End e Coordenador dos sites Linha de Cdigo e MrBool, Atuo na rea de Webdesign h mais de 4 anos. Para trabalhos freelancers visite meu portflio: w w w .ricardoarrigoni.com.br ou se preferir me mande um e-mail.

O que vo c acho u des t e po s t ? Go s t ei (0) (0)

0 COMENTRIO
Ne nhum com e ntrio foi postado - se ja o prim e iro a com e ntar!

Cursos relacionados
C urso JavaScript: Explorando as diferentes ferramentas fornecidas pelo JavaScript jQuery A Biblioteca JavaScript para Webdesigners C urso Gratuito de C SS Novidades do HTML 5 Administrao do Firebird/InterBase [Ver todos]

+Front-end web
Publicidade

www.devmedia.com.br/trabalhando-com-eventos-em-javascript/28521

4/5

05/07/13

Trabalhando com eventos em JavaScript

Servios
Inclua um comentrio Adicionar aos Favoritos Marcar como lido/assistido Incluir anotao pessoal Verso para impresso

DevMedia
Curtir Voc curtiu isso.

Voc e outras 10.389 pessoas curtiram DevMedia. DevMedia | Anuncie | Fale conosco Hospedagem web por Porta 80 Web Hosting
2013 - Todos os Dire itos R e se rvados a web-03
P lug-in social do F acebook

www.devmedia.com.br/trabalhando-com-eventos-em-javascript/28521

5/5