-
DOM에서 event 다루기JavaScript/ReactJS 2021. 5. 3. 17:59
DOM요소에 클릭이벤트를 걸어 사용할 때, 종종 event.preventDefault(); 를 걸어줄 때가 있다.
클론코딩을 하며 클릭 이벤트마다 저 함수를 써주는지 궁금해서 DOM의 event에 대해 찾아 보게 되었다.
이벤트 버블링은 이벤트를 건 노드의 부모까지 이벤트가 전파되는 것이다.
DOM의 EVENT FLOW 위의 이미지를 참고해보면 <td> 태그에 내가 작성한 이벤트가 <tr>, <tbody> .... <window> 루트 노드까지 올라갈 수 있다는 것이다. 그렇게 되면 각각의 노드마다 다른 이벤트를 실행해야할 때, 이벤트가 엉킬 수 있다는 것이다.
event.stopPropagation(); 을 사용하면 내가 지정한 노드에 걸어놓은 함수만 실행이 된다.
어떤 태그들은 클릭 이벤트 이외에 브라우저의 이벤트를 조작하는 경우가 있다.
<a> 태그의 경우, 클릭이벤트와 href 속성이 있다. 이때 href는 브라우저의 주소 이동이나 해당 페이지의 앵커포인트 이동 등을 하게 되는데, 이를 막는 것이 event.preventDefault(); 이다.
참고 |