Nas lições anteriores, você aprendeu como trabalhar com eventos usando o método addEventListener(). Mas existe outra forma, não recomendada, de trabalhar com eventos em JavaScript. Manipuladores de eventos inline são atributos especiais em um elemento HTML que são usados para executar código JavaScript quando um evento ocorre. Aqui está um exemplo de um elemento button com um manipulador de evento de clique inline:

<button onclick="alert('Hello World!')">Show alert</button>

Quando o usuário clica no botão, a função alert é chamada e uma caixa de diálogo de alerta é exibida com a mensagem Hello World!. Outra forma de usar manipuladores de eventos inline é chamar uma função que está definida em uma tag script no documento HTML. Aqui está um exemplo de definição de uma função chamada changeBgColor e sua chamada a partir de um manipulador de evento de clique inline:

<script>
  function changeBgColor() {
    document.body.style.backgroundColor = "lightblue";
  }
</script>

<button onclick="changeBgColor()">Change background color</button>

Quando o usuário clica no botão, a função changeBgColor é chamada e a cor de fundo da página é alterada para azul claro. Embora seja possível usar manipuladores de eventos inline assim, isso não é considerado uma boa prática. Por um motivo, os manipuladores de eventos inline só podem ser usados para anexar um ouvinte de evento a um elemento. Se você quiser anexar múltiplos event listeners ao mesmo elemento, você precisará usar addEventListener(). Outra razão é que os manipuladores de eventos inline misturam código HTML e JavaScript, o que pode tornar seu código mais difícil de ler e manter. É melhor manter seu código HTML e código JavaScript separados usando addEventListener() para anexar event listeners aos elementos. Manipuladores de eventos inline não são recomendados para uso no JavaScript moderno. Portanto, é uma boa prática usar o método addEventListener() ao trabalhar com eventos em JavaScript.