-
Event bubbling, 이벤트 버블링이란?javascript 2022. 3. 25. 20:23
안녕하세요 박상준입니다. 오늘은 이벤트 버블링에 대해 공부해보는 시간입니다! 🤔
What is the event bubbling?
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다.
HTML요소는 트리 형식이죠? 그렇다면 그 랜딩페이지에서 <Body />가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있죠.
브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가집니다. 이 것을 ' 이벤트 버블링' 이라고 합니다.
What is the event Capture?
이벤트 캡쳐링은 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달합니다. 이벤트 버블링과 정반대인 것이죠. 이 것은 이벤트리스너의 옵션으로써 구현할 수 있습니다.
W3C의 명시스펙 그렇다면 이벤트를 제어하고 싶다면 어떻게 해야할까요? 우선 이벤트를 등록할 때 아무런 옵션을 주지 않으면 버블링이 됩니다. 반대로 캡쳐링 하고 싶다면
target.addEventListener("click", function(){}, true);다음과 같이 addEventListener 메소드에 true 를 주게되면 캡처링됩니다.
event.stopPropagation()
이벤트의 전파를 원하지 않을 경우 e.stopPropagation() 메소드를 사용할 수 있습니다.
target.addEventListener("click", function(e){ e.stopPropagation(); });다음과 같이 타겟의 이벤트 전파를 막을 수 있습니다.
이벤트 위임
우리는 이 이벤트버블링과 캡처링등을 통해 이벤트 위임을 할 수 있습니다. 이 이벤트 위임을 간략하게 설명하면 '하위 요소의 이벤트를 상위 요소에 위임한다'라고 말할 수 있을 것 같습니다.
즉, 하위요소의 이벤트를 상위에서 제어합니다.
만약 하위 요소에서 이벤트를 제어하게 된다면, 새로운 아이템 즉 하위요소에 새로운 요소가 하나 더 추가될 때 마다 이벤트리스너를 계속해서 등록해줘야 합니다. 하지만 이 하위요소들이 존재하는 상위 요소에서 이벤트를 제어하게 된다면 하위요소가 추가될 때 마다 따로 이벤트리스너를 등록하지 않아도 됩니다.
쉽게 말하면, 상위요소에서 계속 감시를 하고 있다가 하위 요소에서 이벤트가 발생하면, 상위 요소에서 그 것을 제어하는 것입니다.
도움이 되셨나요? 쉽게 이벤트를 발생시키면 하위에서 상위로 간다 => 따라서 그 상위에서 이벤트를 관리하면 하위의 요소들에게 일일이 이벤트를 등록하지 않아도 된다. 라고 이해하시면 편할 것 같습니다!
'javascript' 카테고리의 다른 글
[this, 화살표 함수] Javascript this 완전정복! (0) 2022.03.31