프로젝트를 진행하면서 게시판 목록에서 목록을 클릭하여 상세보기로 넘어가는 과정에서 작동이 잘 되지 않으신 분들이 계실겁니다. 또 몇몇 분들은 잘 작동이 되셨을것이구요. 왜 이런 차이가 생겼을까요? 🤷♀️
그 이유는 Event Bubbling(이벤트 버블링) 때문입니다.
이벤트 버블링 이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미합니다.
예를 들어,
<form onclick="alert(form)">
<div onclick="alert(div)">
<p onclick="alert(p)">P</p>
</div>
</form>
위와 같은 구조에서 <p>를 클릭하면 p→div→form 순서로 3개의 경고창을 나타나게 됩니다.
프로젝트에서는 목록의 제목이나 내용에 onClick함수가 있는것이 아닌 전체를 감싸주는 박스에 onClick함수가 있을 경우 발생하게 됩니다. 이러한 경우 event.target.id가 아닌 event.currentTarget.id 를 사용하여 버블링을 막아 줄 수 있습니다.
preventDefault는 웹 개발에서 자바스크립트를 사용해 이벤트가 기본적으로 수행하는 동작을 막을 때 사용되는 함수입니다. 이 함수를 사용하면, 이벤트가 발생했을 때 브라우저가 기본적으로 수행하는 행동을 방지할 수 있습니다.
예를 들어, HTML의 <a> 태그(링크)를 클릭하면 브라우저는 해당 링크로 이동합니다. 하지만 자바스크립트에서 preventDefault를 사용하면 이 기본 동작을 막을 수 있습니다.
const JS_삭제하기기능 = (event, 어떤거삭제할지받기) => {
event.preventDefault(); // 이게 없으면 버튼 밑바닥에 있는 <a />도 눌러짐
alert(`${어떤거삭제할지받기}번 사진이 삭제되었습니다.`);
};
<a href="./01-event-bubbling2-prevent-default-detail.html">
<div class="CSS_이미지사진">
<button onclick="JS_삭제하기기능(event, 1)">1번 삭제</button>
</div>
</a>
preventDefault가 필요한가요?버튼을 클릭하면 브라우저는 기본적으로 <a> 태그의 href속성에 지정된 URL로 이동하려고 합니다. 하지만 우리는 버튼을 클릭했을 때 이동하는 대신 사진이 삭제되었다는 알림을 띄우고 싶습니다.
preventDefault를 사용하지 않으면 버튼 클릭 시 다음과 같은 일이 발생합니다:
JS_삭제하기기능 함수가 실행되어 경고창이 뜹니다.<a> 태그의 href 속성에 지정된 URL로 이동합니다.하지만 preventDefault를 사용하면 다음과 같이 동작합니다:
JS_삭제하기기능 함수가 실행되고, event.preventDefault()로 인해 브라우저의 기본 동작이 막힙니다.