jQuery - focus/blur 와 focusin/focusout 의 차이

• focusin, focusout : 버블링 발생함
• focus, blur : 버블링 발생안함

부모가 div고 내부에 input 요소가 있을때

input 요소에 focusin 되면 부모 div에도 그 이벤트가 전달된다.

input 요소에 focus 되면 부모 div에는 그 이벤트가 전달되지 않는다.

정리

1. 동일한 결과를 예상하고 싶을때

focusin과 focusout를 함께, focus와 blur를 함께 사용하자.

2. input에 포커스되거나 잃어버렸을때, 부모요소에서 리스너를 동작하고 싶다면

focusin과 focusout을 사용하자.

<div class="parent">
    <input type="text">
</div>

<script type="text/javascript">
 
$('.parent').focusin(function(){
    console.log('부모 focusin!');
});
$('input').focusin(function(){
    console.log('인풋 focusin!');
});
$('.parent').focus(function(){
    console.log('부모 focus!');
});
$('input').focus(function(){
    console.log('인풋 focus!');
});
 
</script>

input에 포커스되면 

인풋 focusin!

부모 focusin!

인풋 focus!

이라고 뜸. 부모에 focus/blur 이벤트는 전달되지 않은걸 확인할 수 있다.