onClick 이벤트 href

특히 a(anchor) 태그와 함께 사용할 때, onClick 이벤트를 자주 사용하는데, 이 이유는 크게 세 가지가 있다. 
  1. 이동되는 경로(URL)을 사용자에게 숨기기 위해서
  2. form 방식으로 페이지를 이동하여, 새로운 페이지에 값을 넘겨주기 쉽게 하기 위해서

  3. 페이지를 이동하기 전에 자바스크립트 함수를 호출하여, 메시지를 보여주거나 입력값을 체크하기 위해서

결국, a 태그가 페이지를 이동하는 역할을 함에도 불구하고 onClick를 사용하는 이유는 위에서 설명했다. 그러면 a 태그의 href를 무시하고 onClick 이벤트가 참조하는 자바스크립트 함수를 호출하는 방법은 여러가지가 있다. 먼저 자주 사용되는 것부터 확인해보자.

 1. <a href="javascript:alert('naver');"> Naver </a>
 2. <a href="#" onClick="alert('daum');"> Daum </a>
 3. <a href="javascript:void(0);"  onClick="alert('nate');"> Nate </a>

1번은 href의 값에 URL 대신 javascript 함수를 호출하도록 하였다. 클릭하면 바로 경고창이 뜨게 된다. 이 방법은 브라우저 하단의 회색의 상태바에 javascript:alert('naver');가 보인다.
2번은 자바스크립트가 호출하는 함수를 숨기기 위해 #을 사용했다. 하지만 이것은 함수에서 페이지가 이동하지 않으면, 브라우저가 이동할 곳을 잃어버리고 페이지의 상단으로 이동해버린다는 단점이 있다.
3번은 이것을 해결하기 위해 자바스크립트에서 Null과 마찬가지인 void(0)을 사용했다. 처음에는 이것의 문제를 몰랐는데, Internet Explorer 6 을 사용하는 사용자가 페이지가 이동하지 않는다고 이야기하여 이것의 문제를 알게 되었다. IE 7 이나 FireFox에서는 이상없이 처리되었다.

이 문제를 해결하기 위해 여러 곳을 찾아보다가 다음과 같은 해결책을 찾게 되었다.

 4. <a href="#" onClick="alert('dooji'); return false;"> dooji.com </a>
 5. <a href="javascript:void(0);"  onClick="alert('tistory'); return false;"> dooji.tistory.com </a>

바로 return false; 를 호출하는 함수 뒤에 추가하는 것이다. 이것은 href에 #을 사용해도 페이지 위로 이동하지 않는다. href의 값은 자신이 좋아하는 취향에 따라 적용하면 될 것 같다. 왜 이런 현상이 일어나는 지에 대해서는 좀 더 알아본 후에 적도록 하겠다.

http://dooji.tistory.com/133