Duvida

O problema apresentado no exemplo dos professores destaca a questão da sobrescrita de manipuladores de eventos (event handlers) em JavaScript. Quando você define um manipulador de evento usando a propriedade onclick de um elemento, você está atribuindo uma função a essa propriedade. Se você fizer isso mais de uma vez para o mesmo evento, a definição anterior será substituída pela mais recente.

No seu exemplo inicial, a sequência de código é assim:

btnExemplo.onclick = function() {
    alert('Botão clicado!');
}

btnExemplo.onclick = function() {
    btnExemplo.style.backgroundColor = 'red';
}

Aqui, a primeira função que exibe um alerta é sobrescrita pela segunda função que altera a cor de fundo do botão. Portanto, ao clicar no botão, apenas a segunda função será executada e o alerta não será mostrado.

Para resolver isso e garantir que ambas as ações sejam executadas ao clicar no botão, você pode combinar as duas funções em uma única definição de onclick, como você sugeriu:

btnExemplo.onclick = function() {
    alert('Botão clicado!');
    btnExemplo.style.backgroundColor = 'red';
}

Neste caso, ambas as ações ocorrerão quando o botão for clicado: primeiro, o alerta será exibido e, em seguida, a cor de fundo do botão será alterada.

Outra Abordagem: addEventListener

Outra maneira de adicionar múltiplos manipuladores de eventos sem sobrescrevê-los é usar o método addEventListener. Este método permite que você registre múltiplos manipuladores de eventos para o mesmo tipo de evento, sem que um sobrescreva o outro:

btnExemplo.addEventListener('click', function() {
    alert('Botão clicado!');
});

btnExemplo.addEventListener('click', function() {
    btnExemplo.style.backgroundColor = 'red';
});

Com addEventListener, ambos os manipuladores de eventos são chamados quando o botão é clicado, na ordem em que foram adicionados. Isso evita a sobrescrita e é considerado uma prática recomendada para adicionar manipuladores de eventos, especialmente quando diferentes partes do seu código podem precisar responder ao mesmo evento.

Conclusão

Sobrescrever manipuladores de eventos usando a propriedade onclick pode causar problemas porque apenas o último manipulador atribuído será executado. Para evitar isso, você pode combinar todas as ações em um único manipulador ou usar addEventListener para adicionar múltiplos manipuladores de eventos sem sobrescrita.