Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como que funciona a atribuição de atributos nativos do DOM?

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Dando tchau no clique de um botão

por Matheus de Magalhães Franco
| 59.4k xp | 6 posts

Pessoal, eu entendi que realmente não faz sentido receber um valor de uma função que não retorna nada. Até aí tudo bem, mas eu fiquei pensando: E se tiver uma variável com o mesmo nome da função? Já que para identificar uma função precisa de parênteses e na associação do onclick não precisou. Então resolvi fazer o seguinte teste:

<meta charset="UTF-8">

<button>Clique-me</button>

<script>
    function tchau() {

        alert("Função");
    }

    var button = document.querySelector("button");

    var tchau = "Variável";

    button.onclick = tchau;

    alert(button.onclick);

</script>

Não importa o que eu coloque como variável para o onclick, ele sempre retorna null. Eventos tipo o onclick, só podem receber funções?

O engraçado é que nesse alerta que mostra o evento, ele pega literalmente o código e imprime.

Obs.: Se eu utilizar "return" mesmo com o tchau sem parênteses, também funciona.

3 respostas
solução!
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Olá, Matheus.

Como você fez algumas perguntas vou colocar a sua perguntar em negrito depois a resposta sem ser em negrito :-)

E se tiver uma variável com o mesmo nome da função? Em JavaScript quando declaramos uma função com o nome tchau, em seguida declaramos uma variável com o mesmo nome, você acabou de substituir a função pelo valor da variável. Se fizer o caminho contrário o que vai se manter é a função em vez da variável. Ou seja, é guardado o que o browser leu por último.

Não importa o que eu coloque como variável para o onclick, ele sempre retorna null. Eventos tipo o onclick, só podem receber funções? Todos eventos no JavaScript (onclick, onkeydown, onmouseover...) só estão preparados para receber uma função, quando passamos uma variável para um evento ele guarda o valor null. Quando passamos uma função para qualquer evento do JavaScript, ele guarda todo o código da função, que só será executado no momento que o evento acontecer.

Se ficar mais alguma dúvida é só falar :-)

por Matheus de Magalhães Franco
| 59.4k xp | 6 posts

Obrigado pela resposta professor!

Agora surgiu uma outra dúvida:

E se a função tiver parâmetro?

Como ficaria a atribuição do onclick neste caso:

 function tchau(a) {
        alert("Função: " + a);
    }
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Matheus, eu faria conforme o código abaixo, mas eu não sei se é a forma mais elegante. :-)

function tchau(a) {
    alert("Função: " + a);
}

document.querySelector('button').addEventListener('click', function () {
    tchau("Texto dentro da função");
});

Se ficou alguma dúvida avisa aí que explico melhor.