표준 DOM 이벤트
- 캡쳐링 단계 : 이벤트가 하위 요소로 전파되는 단계
- 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
- 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계
이벤트 버블링
- 한 요소에 이벤트 발생 → 이 요소에 할당된 핸들러 동작 → 이어서 부모 요소 핸들러 동작 → 최상단의 조상 요소 만날 때까지 과정 반복되면서 요소 각각에 할당된 핸들러 동작
form > div > p 형태로 중첩된 구조이고, 요소 각각에 핸들러가 할당되어 있을때
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form><p>에 할당된onclick핸들러가 동작- 바깥의
<div>에 할당된 핸들러가 동작 - 그 바깥의
<form>에 할당된 핸들러가 동작 document객체를 만날 때까지, 각 요소에 할당된onclick핸들러가 동작
버블링 중단
핸들러에게 이벤트를 완전히 처리하고 난 후 버블링 중단하도록 하려면 : event.stopPropagation()
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body><button> 을 클릭해서 body.onClick 은 동작하지 않음
e.stopPropagation(): 이벤트 전파 중지e.stopImmediatePropagation(): 이벤트 전파 중지 + 형제 이벤트 실행 중지e.preventDefault(): 이벤트 전파 중지 + 형제 이벤트 실행 중지 + 이벤트 기본 동작 중지
캡쳐링
- 이벤트가 최상위 조상에서 시작해 아래로 전파되는 것
- 캡쳐링 단계에서 이벤트를 발생시켜야 하는 경우는 매우 드물다!
- 보통 타깃 단계에서 target 에 등록된 이벤트 핸들러가 있으면 해당 이벤트 핸들러가 먼저 동작한 후 버블링 단계에서 각 부모 요소에 등록된 이벤트 핸들러가 있으면 그때 해당 이벤트 핸들러가 동작하는 것이 일반적이다
- 캡쳐링 단계에서 이벤트 핸들러를 동작시키는 방법 :
addEventListener에 세번째 프로퍼티에true또는{ capture:true }를 전달
이벤트 위임
- 버블링을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있다
- ex ) 할일 목록을 만들때 추가한 항목에도 자동으로 이벤트가 적용될 수 있도록 하는 상황
⇒ 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있다
이렇게 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임이라고 부른다
- 이벤트 위임은 버블링을 활용한 것이기 때문에 자식 요소 중에서 버블링을 막는 것이 있다면 버블링이 막혀 의도한대로 이벤트가 동작하지 않을 수도 있다 (그러니까 버블링을 막는것은 최대한 피하기~~)
