JS30- Sticky Nav / Event Capture, propagation

JS30 24강을 진행하면서 배운 내용을 정리해두려 합니다. 

---

1.CSS position 

CSS 포지션이 잘 이해가안가는 부분이 있었는데 특정 element의 position을 fixed 로 바꾸면 아래에 있던 element가 위치가 위로 당겨지는 거였다. 그 이유는 absolute positioning에 해당하는 요소들인 문서의 normal flow 에서 벗어나기 때문이다. 

스택오버플로우에서 해당 내용을 기막히게 비유한 글이있어서 간단하게. 옮겨 적는다. (https://stackoverflow.com/questions/33132586/why-isnt-my-margin-working-with-position-fixed/33132765#answer-33132765)

HTML 문서를 하나의 강이라고 생각하고 강을 위에서 쳐다본다고 생각해보자. 강바닥에 돌들이 있고 그 돌들이 문서의 각 element이다. 그런데 어떤 돌의 포지션을 fixed로 하게되면 실상 그 돌을 강 표면으로 떠오르게 하는거다. 강을 여전히 위에서 쳐다 볼때는 바뀐점은 업겠지만 fixed로 떠오른 돌 주변에 있던 돌은  그 돌이 빠진 자리로가서 그위치를 대신 하게 될것이다. 

추가로 CSS 문서와 포이마웹의 설명또한 이해에 도움이 되서 링크를 첨부해 놓는다. 

https://drafts.csswg.org/css2/#absolute-positioning

https://poiemaweb.com/css3-position

CSS3 Position | PoiemaWeb

---

2.Event 버블링, 캡쳐

HTML 문서에서 특정 elelment에서 이벤트가 발생하면 해당 이벤트는 연쇄적으로 이벤트를 전파시킨다. 그리고 이를 전파방향에 따라 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)으로 구분한다. 

 

캡쳐링과 버블링은 둘중 하나만 발생하는것이 아니라 캡쳐링으로 시작해서 버블링으로 종료 된다. 

즉 nested된 DOM 엘리먼트는 해당 엘리먼트에서만 이벤트가 발생하는게 아니라 연쇄적으로 부모에게 이벤트를 전달 한거나, 부모로부터 DOM tree를 타고 전달 받는다는 것으로 이해할 수 있을 거 같다.  

https://poiemaweb.com/js-event#6-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%9D%98-%ED%9D%90%EB%A6%84

Event | PoiemaWeb