자바스크립트에서 어느 요소에 이벤트를 걸때
할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작 한다고 한다.
따라서
동적으로 생성된 태그인 경우 부모요소에 이벤트를 걸면 자식요소에 이벤트를 걸 수 있다.
event.target.tagName --이벤트 걸린 태그명
event.currentTarget --버블링이 아닌 내가 택한 선택자를 띄우려면
event.stopPropagation() --버블링을 멈추려면반대로 캡처링은 부모를 클릭했을 때 자식한테 이벤트가 가는것.
사용 예시
버블링
버튼을 클릭해서 알럿을 띄워야 하는데
사용자가 버튼 내부의 스팬태그를 클릭을 한 경우?
내부의 자식태그를 클릭하지만 원래의 목적인 버튼을 클릭하여 동등한 이벤트효과를 주고자 할때
자바스크립트에서 자체 지원.
버블링 잘 모르겠고 난 그런거 싫다.
그렇다면 위에 적어 놓은걸 사용하여 컨트롤하면 되겠다.
//자식을 클릭하지만 부모에 영향이 간다
캡처링
거의 사용되지 않지만 사용되는 곳은 팝업 띄울때.
팝업을 제외한 나머지 배경은 dim처리하는데, 이건
팝업 태그의 부모 태그이다.
부모태그인 dim을 클릭할 때 팝업을 닫고싶다. 그럴때 사용됨
//부모를 클릭하지만 자식에 영향이 간다
--ex 팝업닫기 이벤트
//add이벤리스너의 세 번째 인자에 false를 주어 캡처링을 구현
//기본값은 false(버블링)
$dim.addEventListener('click', popClose, true);검색해보니 더 좋은 설명글이 있었다.
https://ko.javascript.info/bubbling-and-capturing
Hej_han