[JavaScript] a태그에서의 onclick 이벤트의 이용법

프로젝트를 하면서
<a href=""></a>의 새로운 이용법을 알게 되었다.
어쩌면 다 알고 있는 것일 수도 있지만
난 2년이 넘도록 프로그램쪽에 일을 해왔지만
이번 경우는 처음으로 알게되었다.

기본적으로 a태그의 사용은
<a href="URL">이동</a>
이렇게 사용을 한다.
이럴 경우 클릭시 해당 URL로 이동하게된다.

그럼 다음의 경우
<a href="#" onclick="location.href='URL'">이동</a>
이럴 경우도 클릭하면 해당URL로 이동하게 된다.

게시판의 글 삭제 프로세스의 경우 우선 삭제전 보통 "삭제하시겠습니까?" 라는 확인 작업을한다.
이때 a태그와 자바스크립트를 쓰는데
<a href="#" onclick="delchk();">삭제하기</a>

<script type="text/javascript">
function delchk(){
    if(confirm("삭제하시겠습니까?")){
        location.href = "write_del_ok.jsp?num=1";
        return true;
    } else {
        return false;
    }
}
</script>
이렇게 사용하게된다.
위의 경우 처럼 하게 될 경우 #은 최상위 루트를 가리켜 페이지가 없거나 아님 index.jsp같은 페이지를 보여주게 된다.

그래서 여러가지로 실험해본 결과 form 태그의 onsubmit() 같은 기능이 onclick 이벤트에도 있다는 생각이 들었다.
<a href="write_del_ok.jsp?num=1" onclick="return delchk();">삭제하기</a>
<script type="text/javascript">
function delchk(){
       return confirm("삭제하시겠습니까?");
}
</script>
위와 같이 코딩할 경우 삭제하기 를 클릭시 먼저 실행되는 것이 onclick이벤트 이다. 여기서 지정된 함수를 호출한다.
그후 return delchk() 부분에서 delchk()의 리턴값이 true이면 href로 연결된 링크로 이동하고 false이면 이동을 하지
않는다.

덧글|덧글 쓰기

• 써닝2013-01-31 11:58
  담아갑니다. 참고 많이 되었습니다. 감사합니다^^
• 옥카나2015-01-26 18:24
  좋은 정보 감사합니다~ 궁금한게 해결 됐어요! 담아가겠습니다~
• 나그네2015-07-16 14:34
  저것도 나름 한 방업이긴 한데 보통 이게 맞는거 아닌가요?< a href="#" onclick="return delchk();">삭제하기</a>< script type="text/javascript"> function delchk(){ if(confirm("삭제하시겠습니까?")){ location.href = "write_del_ok.jsp?num=1"; } return false; }< /script> 그리고 #은 최상위 루트를 가리키는게 아니라 a 태그의 href에 #a 이런식으로 넣으면 페이지 내에서 id가 a인 애를 찾아가게 됩니다. 그냥 #이라고 넣으면 페이지 꼭대기로 이동(스크롤 이동)합니다. 그래서 함수처리후 href를 타는것을 방지하게 위해서 이벤트 내에서 return 함수명(); 이렇게 주고 함수내에서 로직 처리후 빠져나갈때 무조건 return false를 주게 됩니다.
• 나그네2015-07-16 14:35
  저것도 나름 한 방업이긴 한데 보통 이게 맞는거 아닌가요?< a href="#" onclick="return delchk();">삭제하기</a>< script type="text/javascript"> function delchk(){ if(confirm("삭제하시겠습니까?")){ location.href = "write_del_ok.jsp?num=1"; } return false; }< /script> 그리고 #은 최상위 루트를 가리키는게 아니라 a 태그의 href에 #a 이런식으로 넣으면 페이지 내에서 id가 a인 애를 찾아가게 됩니다. 그냥 #이라고 넣으면 페이지 꼭대기로 이동(스크롤 이동)합니다. 그래서 함수처리후 href를 타는것을 방지하게 위해서 이벤트 내에서 return 함수명(); 이렇게 주고 함수내에서 로직 처리후 빠져나갈때 무조건 return false를 주게 됩니다.

 

[출처] http://egloos.zum.com/pdw213/v/3493140