[JavaScript] e.stopPropagation(), e.preventDefault()

 

 

---

목차

 

1. event.stopPropagation();

2. event.preventDefault();

---

 

 

1. event.stopPropagation();

---

Propagation는 전파, 확산이라는 의미를 가지고 있다.

 

사용자가 웹페이지 내의 버튼을 누르면 대부분의 사람들은 버튼만 반응했다고 생각하지만 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그를 또한 클릭 이벤트에 반응하게 된다. 

<ul>
    <li class="list">
        <a class="anchor" href="#">Hello</a>
    </li>
</ul>

 

위의 코드를 보면 a태그는 li, ul 두 개의 부모태그가 있다. 사용자가 a태그를 클릭하면 클릭이벤트가 li, ul 태그가 순차적으로 실행된다. 만약 a태그를 클릭했을때 li, ul 태그가 실행되지 않게 하려면 event.stopPropagation();를 사용하면 된다. 

 

 

2. event.preventDefault();

---

a 태그는 내부에 href="#" 속성을 가지고 있습니다. href 속성은 a태그 클릭시 이동할 페이지를 나타낸다.

a  태그는 click 이벤트 또한 가지고 있기 때문에 a태그를 클릭하면 두가지 행동을 하게 된다.

 

1. click 이벤트 실행

2. 브라우저에게 href에 표시된 곳으로 이동하도록 함.

 

href="#"는 click 이벤트만 실행해주고 웹브라우저가 이동하지는 않는데요 한가지 주의할 점이 있다.

 

href="#"는 웹브라우저가 다른곳으로 이동하지는 않지만 스크롤이 페이지 상단으로 이동한다. 예시로 글을 작성하거나 회원가입을 할 때 버튼을 클릭하면 페이지가 최상단으로 올라가게 된다.

 

이러한 행동을 막기 위해 사용하는게 preventDefault 이다.

 

정리

---

- stopPropagation: 부모태그로의 이벤트 전파를 중지하라는 의미

- preventDefault: a 태그처럼 클릭 이벤트 외에 별도의 브라우저의 기본동작을 막기 위해 사용함.