Eventos onclick e ondblclick em JavaScript. Dica 18

Nesta dica você confere uma breve introdução a eventos em JavaScript e um exemplo do evento onclick e ondblclick.

Leia esta dica ouvindo o vídeo ou, assista ao vídeo:

Muito provavelmente você já leu ou ouviu os termos "web dinâmica" e/ou "interatividade na web" relacionados a palavra JavaScript.

Grande parte dessa interatividade é gerada a partir de eventos em JavaScript.

Existem INÚMEROS eventos DIFERENTES e, nesta dica nós veremos dois eventos, relacionados ao clique e ao duplo clique.

Qualquer elemento em uma página HTML pode conter eventos em JavaScript.

Como já informei, nesta dica veremos eventos relacionados ao clique do mouse, por isso o código fonte HTML inicial tem apenas um botão.

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos em JavaScript, parte 01. Dica 17</title>
        <script src="eventos01.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Eventos em JavaScript, parte 01. Dica 17</h1>
        <form>
            <input type="button" value="Botão" />
        </form>
        <h1 id="clicks"></h1>
    </body>
</html>

Claro que, os eventos relacionados ao clique do mouse podem ser inseridos em diversos elementos HTML, mas eu escolhi um simples botão.

Dentro da tag input do meu botão eu insiro o evento onclick.

onclick=""

Eu poderia informar dentro das aspas o que este evento faz, mas, eu prefiro fazer isso em um documento exclusivo para os meus scripts.

No documento .js eu vou (neste caso) usar uma função, por isso (no HTML) entre as aspas do evento que acabei de criar eu informo essa função.

onclick="umclick();"

Agora eu crio essa função em meu documento .js, lembrando que caso tenha alguma duvida sobre esta função por favor ver a dica anterior deste curso.

function umclick () {
document.getElementById("clicks").innerHTML = "um click";
}

Teste este código fonte até aqui em seu navegador.

Para utilizar o evento relacionado ao duplo clique do mouse basta usar ondblclick ao invés de onclick.

ondblclick="duploclick();"

Depois criar uma função exclusiva para este evento com JavaScript.

function duploclick () {
document.getElementById("clicks").innerHTML = "duplo click";
}

Com relação ao código fonte essa dica é pequena, mas se olhar o você já está fazendo com JS verá que já aprendeu muita coisa legal, e depois e a tendência é cada vez ficar mais legal.

Código fonte HTML completo

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos em JavaScript, parte 01. Dica 17</title>
        <script src="eventos01.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Eventos em JavaScript, parte 01. Dica 17</h1>
        <form>
            <input type="button" value="Botão" onclick="umclick();" ondblclick="duploclick();"/>
        </form>
        <h1 id="clicks"></h1>
    </body>
</html>

Código fonte JS completo.

function umclick () {
document.getElementById("clicks").innerHTML = "um click";
}
function duploclick () {
document.getElementById("clicks").innerHTML = "duplo click";
}

Dica

Esta é a primeira dica exclusiva sobre eventos em JavaScript da Em Busca do Código, espero que tenha gostado e, como dica, peço que crie outro botão e inclua nele um dos eventos acima citados, o excluindo do outro botão. Alterar o título do seu arquivo HTML com um desses eventos seria uma boa.

Espero que esta dica tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.