Como desabilitar um evento JS com responsividade?

Olá Renan, tudo bem?

Desculpe a demora em retornar.

Para desabilitar esse evento em dispositivos móveis, você pode utilizar a propriedade window.innerWidth para verificar a largura da tela. Se a largura da tela for menor do que um determinado valor, você pode remover os event listeners que você adicionou ao cabeçalho.

Aqui está um exemplo de como você pode fazer isso:

function desabilitarEvento() {
  if (window.innerWidth < 768) {
    cabecalho.removeEventListener("mouseover", mudarCor);
    cabecalho.removeEventListener("mouseout", removerCor);
  } else {
    cabecalho.addEventListener("mouseover", mudarCor);
    cabecalho.addEventListener("mouseout", removerCor);
  }
}

function mudarCor() {
  this.style.backgroundColor = "rgb(150, 150, 150)";
}

function removerCor() {
  this.style.backgroundColor = "transparent";
}

window.addEventListener("resize", desabilitarEvento);
desabilitarEvento();

Nesse exemplo, eu defini a largura máxima para dispositivos móveis como 768 pixels (o que é comum para telas menores). Quando a largura da tela é menor do que 768 pixels, eu removo os event listeners que você adicionou ao cabeçalho. Quando a largura da tela é maior ou igual a 768 pixels, eu adiciono novamente os event listeners.

Eu também adicionei um event listener para o evento "resize" da janela, para que o código seja executado sempre que a largura da tela mudar.

Um abraço e bons estudos.