js 부모 엘리먼트 이벤트 제거, 이벤트 상속 제거 - 자식 요소 이벤트 하나만 실행하기 <이벤트 버블링>

html과 js로 코딩을 하다보면 요소마다 이벤트를 추가하여 사용할 일이 많습니다.

그러다보면 구조가 형제sibling가 아닌 부모-자식 관계의 요소가 될 수밖에 없는데, 이때  자식 요소를 만들면 부모의 이벤트도 함께 적용되곤 합니다. 자식의 이벤트를 하나만 실행하고 싶은데, 부모의 이벤트까지 같이 한 번에 실행되어 버리니 골치가 아픈데요.

하지만 그렇다고 자식 요소에서 부모의 이벤트를 removeEventListener 하기 어렵기 때문에 고민하실 수 있는데, 이때 자식 요소에서 본인의 이벤트만 호출하고 부모 이벤트 호출은 제거, 막는 방법을 공유해드립니다.

 

JS onclick 이벤트 하나만, 부모 이벤트 제거

이번 예시는 onclick 이벤트로 들어보겠습니다. 부모 요소 안에 자식 요소가 있으며, 각각 이벤트를 가지고 있다고 가정합니다.

이런 구조를 생각하시면 되고, html 코드는 다음과 같겠습니다.

<div id="parent" onclick="parentEvent(e)">
	<div id="child" onclick="childEvent(e)"></div>
</div>

여기서 div가 span이든, p이든, button이든 상관 없습니다. 이벤트를 본인 이벤트만 적용해보도록 하기 위해서는 다음을 이해하셔야 합니다.

 

이벤트 버블링

위와 같은 구조에서 child 요소를 클릭했을 때 총 두가지 이벤트가 실행됩니다. 바로 childEvent()함수와 parentEvent()함수입니다.

이것이 바로 이벤트 버블링 현상입니다. 자식 요소를 클릭하면, 그것을 포함하고 있는 부모 요소도 클릭할 수밖에 없는 것입니다.

실행순서는 자식->부모 차례로 실행됩니다. 그렇다면 자식에서 부모로 가는 이벤트를 막아준다면? 본인의 함수 하나만 호출할 수 있게 되겠죠.

어떻게 하면 되는지 바로 알아보겠습니다.

 

 

e.stopPropagation()의 활용 예시

그래서 사용하는 함수가 바로 stopPropagation()입니다.

propagation이라는 단어의 뜻 자체가 "번식"인데, 이를 막겠다는 것으로 이벤트의 전파, 즉 다음 이벤트로의 실행을 막는다는 뜻으로 이해하시면 쉽습니다.

이벤트 파라미터 안에 내장되어있어 편하게 사용하시면 됩니다. html에서 onclick을 작성할 때 꼭 e(이름은 상관없습니다, event로 작성하셔도 무관)를 넣어주세요.

활용 예시는 다음 코드를 참고해주세요.

 

function childEvent(e){
	e.stopPropagation();
    cosole.log("이부분에 자식 요소를 클릭했을 때 하고 싶은 함수 작성");
}

부모로의 이벤트 전파를 막고 싶은 단계에서 사용해주시면 됩니다.

예를들어 1->2->3 총 세 단계의 부모-자식 관계가 있다고 가정하고, 2번째 요소의 이벤트 함수에서 활용하면 3이벤트->2이벤트까지만 실행되는 것입니다.

 

이상 이벤트 상속 제거, 자식 이벤트만 실행하기, 부모의 이벤트 실행 막기, 부모 element removeEventListner 하는 방법, 즉 이벤트 버블링 현상 제거 방법인 stopPropagation()에 대해 설명드렸습니다.

주의해야할점은, 다른 이벤트까지도 막아버릴 수 있으므로 이벤트 호출 구조를 잘 생각하여 작성하시는 것이 바람직하다는 것입니다.