e.preventDefault()

그 대상을 클릭했을때 발생하는 이벤트를 방지합니다

 

예를 들어

<table class="qnaList" summary="질문 목록 입니다">

<caption>질문목록</caption>
   <colgroup>
    <col width="3%" />
    <col width="9%" />
    <col width="88%" />
   </colgroup>
   <thead>
   <tr>
    <th scope="col">비밀글여부</th>
    <th scope="col">번호</th>
    <th scope="col">정보</th>
   </tr>
   </thead>
   <tbody>

<tr>
       <td>비밀</td>
       <td class="number">${article.positionIdx}</td>
       <td>
        <a href="${ctx}/qna/${article.ntsSno}" title="${article.title}">${article.title}</a>      

        <p>
         <fmt:formatDate value="${artcle.regDttm}" pattern="yy.MM.dd" /> |
                                    조회수 <span>${article.inqNum}</span>
        </p>
       </td>
      </tr>

</tbody>

<script type="text/javascript>

$('table.qnaList tr').bind('mouseenter',function () {
  $(this).addClass('on');
 }).bind('mouseleave',function () {
          $(this).removeClass('on');
         }).bind('click', function (e) {
                      e.preventDefault();
                      location.href = $(this).find('a').eq(0).attr('href');
                 });

</script>

 

위와 같은 경우

e.preventDefault()를 빼면 a tag 한번 location.href 한번 이렇게 두번이 실행됩니다.

그래서 a tag 의 이벤트를 무시하고 location.href 만 실행되도록 합니다.

 

응용할수 있는 부분은 많습니다.

a tag 에 이미지 주소가 있고

그 태그를 클릭할때마다 특정영역의 이미지를 변경하게 한다거나.. ajax 파라메터로 쓴다거나 등등?