이번에는 mouseover과 mouseenter의 차이점에 대해 기록하려 한다 :)
mouseover / mouseout 과 mouseenter / mouseleave 은 둘다 동일하게
마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다.
하지만 mouseover은 만약 내부에 자식 노드가 있을 경우 자식 노드에서도 동일하게 이벤트가 발생한다.
즉, 자식노드를 독립적인 노드로 처리 해버린다.
반대로 mouseenter은 내부 자식 노드를 부모 노드의 일부분으로 처리 함으로써 자식 노드에서 이벤트가 발생하지 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <html> <head> <title></title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> var count = 0; var $info = null; $(document).ready(function(){ $info = $("#info"); $("#parent").mouseover(function(e){ count ++; $info.html($info.html() + "<br>" + count + "." + e.target.id + ".over"); }); $("#parent").mouseout(function(e){ count ++; $info.html($info.html() + "<br>" + count + "." + e.target.id + ".out"); }); }); </script> </head> <body> <div> <div id="info"> </div> <div id="parent" background-color="black"> parent <div id="child"> child </div> </div> </div> </body> </html> | cs |
해당 예제는 mouseover mouseout 예제이다.
다음과 같은 코드에서 위와 같은 사진순서로 마우스 커서를 가져다 보자.
실행 결과로
1. parent.out
2. patent,out
3. child.over
4.child.out
5. parent.over
6. parent.out
순으로 출력 되는 것을 볼 수 있다. 이는 자식 노드가 하나의 독립적인 노드로 작동하는 것을 알 수 있다.
반대로 mouseenter mouseleaver 사용시
1. parent.over
2. parent.out
으로 결과가 나올 것이다 :)
'~ 2024.08' 카테고리의 다른 글
| [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 (1) | 2018.08.02 |
|---|---|
| Input 태그 애니메이션 분석 편 (1) | 2018.07.16 |
| jQuery 이벤트에 대해 알아보기 😉 (0) | 2018.07.11 |
| [ jQuery ] 미션 ( 물고기 움직이기 + 랜덤 스타일 적용하기 ) (1) | 2018.07.10 |
| jQuery div태그 동적 로딩 위한 스크롤 마지막 체크하기 (3) | 2018.06.05 |