티스토리 뷰
mouseover, mouseout, mouseenter, mouseleave
mouseover는 마우스가 요소 또는 그 자식 중 하나에 들어갈 때 트리거됩니다 . 그것의 상대는 mouseout입니다.
mouseenter는 마우스가 설정된 요소에 들어갈 때만 트리거됩니다. 상대 이벤트는 mouseleave 입니다.
mouseenter및 mouseover이벤트는 요소 위로 마우스를 이동하면 트리거됩니다 .
move your mouse
move your mouse
0
0
move your mouse
move your mouse
0
0
왼쪽이 mouseover, 오른쪽이 mouseenter인데요. mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만 mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생합니다. 차근히 해보시길 권장드립니다.
여기서 이벤트 버블링에 대해서 설명을 해야하는데요..
이벤트 버블링 - Event Bubbling
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 위와 같은 스크립트 처럼요!
마우스 오버에서는 둘다 숫자가 올라가는 것 처럼요 ㅎㅎ
버블링 중단하기
이벤트 버블링은 타깃 이벤트에서 시작해서 <html> 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.
그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.
꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 마세요. 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막으세요.
event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어낼 수 있습니다.
문제가 발생할만한 시나리오를 살펴봅시다.
- 중첩 메뉴를 만들었다 가정합시다. 각 서브메뉴(submenu)에 해당하는 요소에서 클릭 이벤트를 처리하도록 하고, 상위 메뉴의 클릭 이벤트 핸들러는 동작하지 않도록 stopPropagation을 적용합니다.
- 사람들이 페이지에서 어디를 클릭했는지 등의 행동 패턴을 분석하기 위해, window내에서 발생하는 클릭 이벤트 전부를 감지하기로 결정합니다. 분석 시스템을 도입하기로 합니다. 그런데 이런 분석 시스템의 코드는 클릭 이벤트를 감지하기 위해 document.addEventListener('click'…)을 사용합니다.
- stopPropagation로 버블링을 막아놓은 영역에선 분석 시스템의 코드가 동작하지 않기 때문에, 분석이 제대로 되지 않습니다. 안타깝게도 stopPropagation을 사용한 영역은 '죽은 영역(dead zone)'이 되어버립니다.
이벤트 버블링을 막아야 하는 경우는 거의 없습니다. 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다. 커스텀 이벤트 사용 방법은 추후에 다루겠습니다. 핸들러의 event 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모 요소의 핸들러에게 전달할 수 있으므로, 이 방법으로도 이벤트 버블링을 통제할 수 있습니다.
이벤트 버블링 말고도 이벤트 캡쳐링이 있는데요. 이것은 버블링과 캡쳐링을 같이 묶어서 다음에 길게 소개 하겠습니다.
'Javascript' 카테고리의 다른 글
| javascript 뮤직 플레이어 만들기 (0) | 2022.04.08 |
|---|---|
| jQuery 란? (0) | 2022.04.08 |
| Element.classList.add() (0) | 2022.02.21 |
| Javascript- setInterval() (0) | 2022.02.15 |
| Splice - 배열 메서드 (0) | 2022.02.15 |
UP NEXT : Javascript
댓글
© 2018 webstoryboy