Respostas:
O evento mouseleave difere do mouseout na maneira como trata o borbulhamento de eventos. Se o mouseout for usado neste exemplo, quando o ponteiro do mouse for movido para fora do elemento Inner, o manipulador será acionado. Geralmente, esse é um comportamento indesejável. O evento mouseleave, por outro lado, só dispara seu manipulador quando o mouse deixa o elemento ao qual está vinculado, não um descendente. Portanto, neste exemplo, o manipulador é acionado quando o mouse deixa o elemento Outer, mas não o elemento Inner.
Pode haver momentos em que mouseouté uma escolha melhor do que mouseleave.
Por exemplo, digamos que você criou uma dica de ferramenta que deseja exibir ao lado de um elemento mouseenter. Você usa setTimeoutpara evitar que a dica de ferramenta apareça instantaneamente. Você limpa o tempo limite ao mouseleaveusar clearTimeoutpara que, se o mouse sair, a dica de ferramenta não seja exibida. Isso funcionará 99% do tempo.
Mas agora, digamos que o elemento ao qual você tem uma dica de ferramenta anexada seja um botão com um clickevento, e também vamos supor que esse botão avisa o usuário com uma caixa confirmou alert. O usuário clica no botão e alertdispara. O usuário pressionou rápido o suficiente para que sua dica de ferramenta não tivesse a chance de aparecer (até agora tudo bem).
O usuário pressiona o alertbotão OK da caixa e o mouse sai do elemento. Mas como a página do navegador está agora em um estado bloqueado, nenhum javascript será disparado até que o botão OK seja pressionado, o que significa que seu mouseleaveevento NÃO DISPARARÁ . Depois que o usuário pressiona OK, a dica de ferramenta aparecerá (o que não é o que você queria).
Usar mouseoutneste caso seria a solução apropriada porque ele disparará.
mouseoutque nesse caso vai disparar? O navegador ainda não estaria bloqueado por mouseout?
Documento da API jQuery:
mouseout
Esse tipo de evento pode causar muitas dores de cabeça devido ao borbulhamento do evento. Por exemplo, quando o ponteiro do mouse se move para fora do elemento interno neste exemplo, um evento mouseout será enviado para aquele e, em seguida, deslizará para o externo. Isso pode acionar o manipulador de mouseout vinculado em momentos inoportunos. Veja a discussão sobre .mouseleave () para uma alternativa útil.
O mesmo mouseleaveocorre com um evento personalizado, que foi criado por causa do motivo acima.
O mouseout do evento será acionado quando o mouse deixar o elemento selecionado e também quando o mouse deixar seus elementos filhos.
O elemento Mouseleave de evento será disparado quando o ponteiro deixar apenas o elemento selecionado.
Referência: W3School