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

[Dúvida] .addEventListener. Diferença entre blur e focusout

Olá!

Em uma das aulas, foi usado o blur pra disparar um evento quando um input perder o foco. Mas o focusout também faz isso, não faz?

Eu dei uma pesquisada e vi que a diferença é que o focusout é lançado depois do blur e que o focusout faz um tal de 'bubble'

O freeCodeCamp me falou que bubble é o ato de um evento ser propagado pros elementos pais do elemento que disparou o evento. Ou seja, se nós tivermos uma árvore tipo:

html -> body -> main -> section -> div -> >elemento<

ao lançar um evento com focusout no elemento, esse evento vai sendo propagado de volta até a raiz da página. Isso quer dizer que se existir um html.addEventListener("focusout",()=>{}), ele também vai ser disparado quando eu ativar o focusout do 'elemento'?

Se você quiser parar isso, você pode chamar o método stopPropagation() do evento (event.stopPropagation()) pra parar a propagação. Ou só usar o blur :v

Tem alguma outra diferença entre eles? Abraço!

2 respostas
solução!

Oi Mayk, tudo bem?

Desculpe a demora em retornar.

Sim, você entendeu certinho a diferença entre os eventos blur e focusout. Ambos são disparados quando um elemento perde o foco, mas o focusout se propaga (faz o "bubbling") pelos elementos ancestrais, enquanto o blur não.

Para ilustrar a diferença, considere o seguinte exemplo:

<html>
  <body>
    <div>
      <input id="meuInput" type="text" />
    </div>
  </body>
</html>
document.querySelector('#meuInput').addEventListener('blur', () => {
  console.log('Evento blur disparado');
});

document.querySelector('#meuInput').addEventListener('focusout', () => {
  console.log('Evento focusout disparado');
});

document.querySelector('div').addEventListener('focusout', () => {
  console.log('Evento focusout no div pai');
});

Ao perder o foco do elemento #meuInput, você verá:

Evento blur disparado Evento focusout disparado Evento focusout no div pai

Se você usar event.stopPropagation() no evento focusout do elemento #meuInput, o evento não será propagado para o elemento div pai:

document.querySelector('#meuInput').addEventListener('focusout', (event) => {
  console.log('Evento focusout disparado');
  event.stopPropagation();
});
document.querySelector('div').addEventListener('focusout', () => {
  console.log('Evento focusout no div pai');
});

Nesse caso, ao perder o foco do elemento #meuInput, você verá:

Evento blur disparado Evento focusout disparado

Em resumo:

  • blur: dispara quando um elemento perde o foco, mas não se propaga (não faz "bubbling").
  • focusout: dispara quando um elemento perde o foco e se propaga pelos elementos ancestrais.

A escolha entre blur e focusout depende de suas necessidades.

Se você precisa lidar com a perda de foco apenas no elemento específico e não se preocupa com a propagação do evento, então usar blur pode ser suficiente. Se você precisa lidar com a perda de foco em elementos ancestrais, focusout seria mais apropriado.

Espero ter ajudado.

Um abraço e bons estudos.

Ajudou de mais!! Muito obrigado pela resposta super completa! :)))

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