이벤트버블링이란?
- 하위 DOM에 연결된 이벤트가 상위로 전파되는 것.
이벤트캡쳐란?
- 상위 DOM에 연결된 이벤트를 하위 DOM으로 전파시키는 것. addEventListener를 할 때 옵션객체에서 capture: true로 지정해서 수행한다.
이벤트위임(Delegation) 이란?
- 상위 DOM에서 하위 DOM의 이벤트를 제어하도록 위임하는 것. 이렇게 하면 DOM마다 이벤트를 연결하지 않아도 되서 코드 양과 이벤트리스너마다 할당될 메모리 사용량이 줄어들고, 버튼 등의 DOM의 추가와 삭제가 유연해진다.
event.stopPropagation()
- 상위나 하위 DOM으로의 이벤트 전파(버블링 or 캡쳐)을 막는다.
event.stopImmediatePropagation()
- 같은 DOM의 다른 이벤트들의 발생을 막는다.
event.preventDefault()
- 태그의 기본 이벤트 수행을 막는다. ex) a 태그의 href 이동 기능을 preventDefault로 방지
return false; (jQuery에서)
- event.stopPropagation + event.preventDefault (원하는 DOM의 한 이벤트만 동작시키고 싶을 때)
'프론트엔드 > JavaScript' 카테고리의 다른 글
클로저를 이용해 반복문 안에서 이벤트리스너 연결하기 (0) | 2021.10.07 |
---|---|
(Javascript) 생성자 (0) | 2021.08.24 |
(Javascript) for, for - of, for - in (0) | 2020.07.15 |
(Javascript) for, forEach, map (0) | 2020.07.11 |
(JavaScript) 동기와 비동기 (0) | 2020.07.06 |