Event bubbling , Event capture , Event delegation

이벤트 버블링 에 대해서 발생한 이벤트가 상위 노드로 계속 전달되는것 정도로만 알고 있었다.

stoppropagation 을 사용할 일이 있어서 같이 적어두고 event capture 랑 event delegation 에 대해서도 알아보자

 

보통 이런 팝업창은 엑스표시를 눌려서 닫히기도 하지만 팝업창 밖에 를 눌르면 그냥 닫히기도 한다.

이럴때 어떻게 해주면 될까?

 

위코드처럼 클로즈 모달 함수를 밖에 박스에 걸어두면 된다...

당연한 이야기긴 하다.ㅎㅎㅎ

 

그런데 div 박스에 stopPropagation 이라는 함수를 걸어주기 않게되면 어떻게 될까?

 

바로 해당 박스만 눌럿을 뿐인데 이벤트가 버블링 되어 밖에 박스를 누를거와 같게되 onCloseModal 함수가 실행이 되게 된다.

그러므로 그냥 창이 닫힌다.

이것은 의도한 바가 아니기 때문에 이벤트 버블링을 막아줌으로써 해결할수 있다.

 

그러한 역할을 하는것이 event.stopPropagation() 이라는 웹 api 이다. 

보통 뭔가 form 에서 submit 할때 refresh 되는것을 막기위해 해당함수에 event.preventDefault()를 사용하듯이 사용하면 된다.

 

그렇다면 event capturing 은 뭘까?

event bubbling 의 반대라고 생각하면 된다. addEventListener 의 3번째 자리 에 기본옵션이 false 인데 이자리가 capturing 유무에 대한 설정하는 자리이다. js 에서는 그자리를 해주면 되고 리액트에서 는 onClick 이 아닌 onClickCapture 라는 속성값을 이용하면 사용할수 있다.

reactjs.org/docs/events.html#supported-events

SyntheticEvent – React

 

그렇다면 event delegation 은 뭘까?

한국말로 하면 이벤트 위임 이라는 말인데 누구한테 위임을 할까 그리고 왜 위임을 할까?

바로 바로 상위태그에 위임을 하는것이다. 하위태그 여러개가 동일한 이벤트를 필요로 할경우 하나한 다 이벤트를 걸어주는 것이 아니라

그냥 상위태그에 걸어주면 버블링되서 알아서 이벤트가 실해이 되게 된다.

즉 독립적인 내용이 아니라 이벤트 버블링의 응용정도라고 생각하면 된다.

 

참고:joshua1988.github.io/web-development/javascript/event-propagation-delegation/#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81---event-bubbling