event.stopPropagation(), event.preventDefault () 이해하기

---

 

e.preventDefault(); 이것이 대체  뭐하는 녀석일까? 궁금해서 정보 검색을 해보았다.

 

간단하게 말하면 다음과 같다.

 

<a href="#this" name="title">${row.TITLE }</a>

 

//제목
   $("a[name='title']").on("click", function(e){  
        e.preventDefault();
        fn_openBoardDetail($(this));
   });

 

이런식으로 소스를 작성한다고 하면

 

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

첫번째 click 이벤트를 실행합니다. 두번째는 브라우저에게 href 에 표시된 곳으로 이동하도록 합니다.

 

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

 

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

 

---