Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Js Eventos

    Enviado por

    Filipe Mendes
    4 visualizações14 páginas

    Título original

    js_eventos

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    4 visualizações14 páginas

    Js Eventos

    Enviado por

    Filipe Mendes

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 14

    Eventos JavaScript

    Ícaro Prado
    Eventos

    Pode ser algo que o navegador faz ou algo que um usuário faz:
    • Uma página terminou de carregar
    • Um campo de entrada HTML foi alterado
    • Um botão HTML foi clicado etc

    Muitas vezes, quando os eventos acontecem, podemos querer fazer


    alguma coisa; e JS permite a execução de código quando os eventos são
    detectados.
    Eventos

    Eventos em Clique
    Onclick

    Um elemento é clicado

    HTML:
    <button onclick = "func1()">Clique aqui</button>

    JS:
    function func1(){
    alert("Bem vindo ao JavaScript"); }
    Ondbclick

    Um elemento é clicado 2 vezes

    HTML:
    <p ondbclick = "func1()">Clique aqui</p>

    JS:
    function func1(){
    document.write("Bem vindo ao JavaScript"); }
    Eventos

    Eventos do Mouse
    Onmouseover e Onmouseout

    Quando o mouse passa sobre um elemento

    <h1
    onmouseover="style.color='red'" onmouseout="style.color='black'">
    Passe o mouse aqui!
    </h1>
    Onmouseover e Onmouseout

    <img onmouseover="bigImg(this)" onmouseout="normalImg(this)"


    src="smiley.gif" alt="Smiley" width="32" height="32">

    function bigImg(x) { function normalImg(x) {


    x.style.height = "64px"; x.style.height = "32px";
    x.style.width = "64px"; x.style.width = "32px";
    } }
    Onmousedown e Onmouseup

    Ao pressionar / soltar o botão do mouse

    <h1
    onmousedown="style.color='red'" onmouseup="style.color='black'">
    Passe o mouse aqui!
    </h1>
    Onmousedown e Onmouseup

    HTML:
    <button onmousedown = "func1()">Clique aqui</button>

    JS:
    function func1(){
    alert("Bem vindo ao JavaScript"); }
    Exercício

    Faça um script onde ao clicar em um botão, muda a cor de um título.


    Eventos

    Eventos de Carregamento da Página


    Onload

    Quando uma página é carregada.

    function carrega() { <body onload=“carrega()”>


    alert(“A página foi carregada”); <h1>Hello World!</h1>
    } </body>
    Onload

    Quando uma página é carregada.

    function carrega_img() { <img src="w3javascript.gif"


    alert(“A imagem foi carregada”); onload=“carrega_img()"
    width="100" height="132">
    }

    Você também pode gostar