Q:

Como executar uma determinada função utilizando 'onmouseover'?

Estou tentando fazer um exercício, no qual eu preciso fazer o seguinte processo:

Utilizando o resultado do primeiro desafio, toda vez que o usuário passar o mouse por cima de
  algum quadrado troque sua cor para uma cor aleatória gerada pela função abaixo:

function getRandomColor() {
 var letters = "0123456789ABCDEF";
 var color = "#";
 for (var i = 0; i < 6; i++) {
 color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
}
var newColor = getRandomColor();

A solução que encontrei para o primeiro desafio citado  foi a seguinte:
var btn = document.querySelector('#criarQuad');
var container = document.querySelector('#app');

btn.onclick = function() {
       var quad = document.createElement('div');
       quad.style.width = '100px';
       quad.style.height = '100px';
       quad.style.backgroundColor = '#F00';

       return container.appendChild(quad);
       console.log(quad);
}

Na função acima, toda vez que o usuário clicar no botão indicado, será adicionado um novo quadrado. Então tentei a seguinte solução para o exercício citado no início da publicação:
container.addEventListener('mouseover', function(e) {
          e.target.className == 'quadrado' ? e.target.setAttribute('style', 'background-color: ' + newColor) : undefined;
});

Porém, ao invés de alterar a cor do quadrado como pede o exercício, ele apaga o quadrado que eu passo o mouse e todos os que vierem na sequencia, alguém saberia me dizer o por quê disso acontecer e como eu poderia solucionar?

A:

Olá, o problema aqui é que ao usar a função setAttribute para alterar o valor da cor de fundo dos quadrados você remove todo o conteúdo da propriedade style, isso inclui as parametrizações de width e height, seu quadrado não estão sendo removido, ele esta assumindo as proporções 0x0 px.
Para resolver isso altere o trecho de código
e.target.setAttribute('style', 'background-color: ' + newColor)

para
e.target.style.backgroundColor = newColor

Você pode inclusive colocar essa notação como um if convencional, e aconselho colocar a sua chamada de função de geração de cor dentro do seu EventListener
container.addEventListener('mouseover', function(e) {
   if (e.target.className == 'quadrado') {
      e.target.style.backgroundColor = getRandomColor();;
   }
});

Outro detalhe importante, estou assumindo que você adicionou corretamente o nome da classe "quadrado" aos seus quadrados, do contrário eles não sumiriam como você mencionou, mas caso não tenha feito isso, inclua o trecho a baixo dentro da sua função onclick
quad.classList.add("quadrado");

