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

Evento

Pessoa, bom dia!

Estou com a seguinte situação: Durante a execução da minha aplicação estou criando alguns elementos do tipo td. Eu consigo adicionar class nesse elemento, até então está tudo certo.

var td = document.createElement('td');
td.classList.add('info-peso');

Meu problema é, eu tenho uma função:

function mensagem(){
  console.log('nome');
}

Eu gostaria que meu novo elemento fosse criado dessa forma:

<td class="info-peso"  onmouseover="mensagem()">

Como eu faço para criar um elemento e add o evento onmouseover?

Obrigado.

2 respostas
solução!

Oi Leandro,

Você pode usar o método setAttribute para qualquer atributo que você queira adicionar num elemento do DOM.

No se caso ficaria assim:

var td = document.createElement('td');
td.classList.add('info-peso');
td.setAttribute("onmouseover",  "mensagem()")

No caso específico de adicionar eventos, é possível e recomendado fazer isso de duas outras maneiras:

Alterando uma proprieade do elemento do DOM

td.onmouseover = mensagem

Ou usando o método addEventListener:

td.addEventListener('mouseover', mensagem)

Note que não passamos mensagem() e sim mensagem– sem os parênteses , pois não queremos executar a função nesse momento, mas apenas avisar qual a função que deve ser executada quando o evento acontecer.

Se quiser saber um pouco mais de quando usar a propriedade onmouseover ou quando usar o método addEventListener, dê uma olhada nesse post que escrevi alguns anos atrás.

Espero ter ajudado

Ajudou sim. Muito obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software