a태그 이벤트 버블링에 대한 질문입니다. !

Question

Document

인터넷의 새로운 시작 ! 네이버 웨일로 차원이 다른 웹서핑을 경험해보세요

다음과 같이 네이버 상단에 있는 웨일브라우저 광고바 예제를 잠시 만드는 중입니다. 그런데, 버튼에서 이벤트 버블링이 일어나 a태그의 href로 이동하게 됩니다. stopPropagation()메서드를 사용해서 전파도 막아보고, a태그에서 클릭이벤트에 e.preventDefault 메서드 또한 걸어주었습니다. 그러나, 신기하게도 버튼을 눌렀을때 이동되는 것은 a태그의 onClick이벤트로 인한 페이지 이동이 아니더군요. 단순한 이벤트 전파가 아닌듯 한데, 어떤 키워드로 검색해보면 좀더 좋을까요 ?

원푠듯 · Accepted Answer

event.stopPropagation은 이벤트의 버블링을 막는 메서드입니다.event.preventDefault는 요소의 기본 동작을 막는 메서드이죠. 하나 알아두시면 좋은 것이 HTML 요소의 이벤트랑 기본 기능은 별개라는 점입니다. href로 지정된 링크로의 이동은 a 태그에 걸린 이벤트로 처리되는 것이 아닌, a태그의 기본 동작으로써 지정되어 있는 액션입니다. 그리고 이 액션을 막으려면 event.preventDefault 메서드를 써야하죠. href의 액션이 이벤트로 처리되는 것이 아니므로, button 태그에서 이벤트 전파를 막아봐야 그대로 네이버로 이동하는 겁니다. 또한 button 태그에서 전파를 막고 a 태그에서 기본 액션을 취소해도 a 태그의 이벤트가 발생하지 못하게 막았으므로, 기본 기능이 취소되지 않은 채로 남게되는 것이죠. 따라서 href에 지정된 uri로의 이동을 막으려면 a 태그 또는 button 태그에서 event.preventDefault 메서드를 호출해야 합니다.

호키도키 · Answer

원푠듯님 친절한 설명 정말 감사 드립니다 !

a태그 이벤트 버블링에 대한 질문입니다. !

2개의 답변

Q&A 목록