[JS] 이벤트 버블링과 캡쳐링

• 이벤트 등록 : 사용자 입력에 따라 추가되는 화면의 동적 기능
• 이벤트 버블링 (Event Bubbling) : 하위요소에서 상위요소로 이벤트가 전달되는 특성
• 이벤트 캡쳐 (Event Capture) : 상위 요소에서 하위요소로 이벤트가 전달되는 특성
• 이벤트 위임 (Event Delegation) : 상위 요소에서 하위 요소의 이벤트들을 제어

• event.stopPropagation() : 이벤트 전파 방지
  • 이벤트 버블링의 경우, 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하지 않음
  • 이벤트 캡쳐의 경우, 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않음

 

자식요소에서 부모요소의 이벤트 동작 안되도록 다 때려넣어봤다.

tag_sp.addEventListener("click", function (event) {
    event.preventDefault();
    tag_li.remove();
    event.stopPropagation();

    return false;
});

 

---

ref)

이벤트 기본개념

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

제이쿼리 적용

이벤트 버블링과 캡쳐링