Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

evento em elemento criado

O botão cria uma div, daí eu quero passar o mouse em cima da div criada e quero q um alert seja exibido. Como eu posso fazer isso?

7 respostas

Fala ai Yuri, tudo bem? Precisa ver como você está fazendo para criar essa div, poderia fazer algo assim:

const div = document.createElement('div')
div.addEventListener('mouseenter', () => {})

Espero ter ajudado.

O meu código tá assim:

<button onclick="criaQuadrado()">Criar</button>

<script>
    function criaQuadrado() {
        var qd = document.body;
        var div = document.createElement('div');

        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = "#F00";

        qd.appendChild(div);
    }
</script>
Daí eu tô criando a div. O que eu quero é: Ao passar o mouse sobre essa div, ele deve exibir um alert. Sacou? Minha dificuldade é pq o elemento vai ser criado, não vem carregado já.
solução!

Entendi, então o código seria o que eu te passei mesmo, faz um addEventListener da div:

<button onclick="criaQuadrado()">Criar</button>

<script>
    function criaQuadrado() {
        var qd = document.body;
        var div = document.createElement('div');

    div.addEventListener('mousenter', function() {
        alert('Passei o mouse')
    })

        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = "#F00";

        qd.appendChild(div);
    }
</script>

Espero ter ajudado.

Mano, funcionou direitinho! Muito obrigado.

Você poderia me explicar o pq esse evento: div.addEventListener('mousenter', function() { alert('Passei o mouse') })

não funciona fora do scopo da function criaQuadrado?

Boa Yuri, fico feliz que tenha dado certo.

Sobre a duvida:

Você poderia me explicar o pq esse evento: div.addEventListener('mousenter', function() { alert('Passei o mouse') }) não funciona fora do scopo da function criaQuadrado?

A questão é que a variável div foi declarada dentro da função criaQuadrado, então, o listener para ela deveria ser adicionado dentro desse contexto.

Caso você esteja tentando adicionar um listener fora da função, pode acontecer do addEventListener não ter encontrado sua div porque ela pode ter sido criada depois da vinculação do evento, algo assim:

<script>
   // nesse momento a nova div ainda nao existe no dom
    div.addEventListener('mousenter', function() {
        alert('Passei o mouse')
    })

    function criaQuadrado() {
        var qd = document.body;
        var div = document.createElement('div');

        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = "#F00";

        qd.appendChild(div);
    }
</script>

Fez sentido?

Espero ter ajudado.

entendi sim! Faz todo sentido. Muito obrigado, irmão! Abração

Magina Yuri, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.