event.preventDefault() / event.stopPropagation()

event.preventDefault()

preventDefault 를 이해하기 위해서는 a 태그를 유심히 봐야 합니다. 위 슬라이드에 표시된 a 태그는 내부적으로 href="#" 속성을 가지고 있습니다. href 속성은 웹브라우저에게 a 태그 클릭시 이동하여야할 페이지를 나타냅니다.

예를 들면) <a href="http://ismydream.tistory.com" onclick="...">창조적고찰 블로그</a> 처럼 사용합니다.

위 a 태그는 click 이벤트 또한 가지고 있기 대문에 a 태그를 클릭했을 때는 차례대로 두가지 행동을 하게 됩니다.

첫번째 click 이벤트를 실행합니다.

두번째는 브라우저에게 href 에 표시된 곳으로 이동하도록 합니다.

href="#" 속성을 넣은 이유는 a 태그에는 click 이벤트가 있으니 click 이벤트만 실행하고 웹브라우저는 이동하지 말아라 하는 의도로 설정한 값입니다. 이렇게 하게 되면 클릭시에는 click 이벤트만 실행되고 웹브라우저가 이동하지는 않게 됩니다. 제가 생각하기에는 좀 꼼수 같기도 합니다.

근데 여기서 한가지 주의해야 할 점이 있습니다. href="#" 은 웹브라우저가 다른 곳으로 이동하지는 않지만 스크롤이 있는 곳에서는 페이지 상단으로 이동하게 됩니다. href="#~~~" 으로 사용하는것을 앵커(닻) 라고 하는데 href="#" 은 웹브라우저의 최상단을 가리키는 앵커입니다.


글을 작성할때나, 회원가입을 할때 버튼 한번 클릭할때마다 페이지가 쭉 위로 올라가는 경험을 해보신분들은 그 짜증스러움을 익히 아시리라 생각합니다. ㅠㅠ

 이 브라우저 행동을 막기위해서 사용하는게 preventDefault 입니다.

preventDefault 는 a 태그 처럼 클릭 이벤트 외에 별도의 브라우저 행동을 막기 위해 사용됩니다.


출처: http://ismydream.tistory.com/98 [창조적고찰]

event.stopPropagation()

- a태그 부모태그는 실행시키지 않는다

실행이 전파되는 것을 막는 메소드

참고 : http://programmingsummaries.tistory.com/313