[jQuery] event.preventDefault()

[jQuery] event.preventDefault()

• HTML a 태그는 내부적으로 href=”#” 속성을 가지고 있습니다. 그리고 href 속성은 a 태그 클릭시 이동하여할 페이지를 나타냅니다.

1.a 태그를 이용한 링크

<a href="www.tistory.com" onClick="  ">클릭</a>

• 위 a 태그는 onClick 이벤트 또한 가지고 있기 때문에 a 태그를 클릭했을 때는 두가지 기능이 동작합니다.
• 첫번째는 onClick 이벤트를 실행하고, 두번째는 href에 표시된 주소로 이동합니다

2. a 태그에서 onClick 이벤트

<a href="#" onClick="  ">클릭</a>

• href=”#” 속성을 넣은 이유는 a 태그에는 onClick 이벤트가 있으니 onClick 이벤트만 실행하고 웹브라우저는 이동하지 않기 위해서 사용했습니다. 이렇게 사용하면 onClick 이벤트만 실행됩니다.
• 여기서 주의할 점은 href=”#”은 웹브라우저의 최상단을 가리키기 때문에, href=”#” 은 웹브라우저가 다른 곳으로 이동하지는 않지만 스크롤이 있는 곳에서는 페이지 상단으로 이동하게 됩니다.
• 따라서 onClick 이벤트만 실행하면서 페이지 최상단으로 가는 것을 막기위해서 event.preventDefault() 를 사용합니다.
• event.preventDefault()는 a 태그 이외에도 별도의 브라우져 행동을 막기 위해서도 사용합니다.