<A HREF="#" 의 말끔한 대안 <a href="javascript:"

Update on 2012-01 : 오래된 글을 보니 부끄럽기 짝이 없군요. 요즘은 이것보다 더 말끔하게, HTML과 JavaScript를 완전히 분리하는 방법을 선호하는 추세입니다. Unobtrusive JavaScript라고도 하는데요,

<a href="http://www.google.com" id="google">Google</a>
<script>
$('#google').click(function(e) { e.preventDefault(); window.open(this.href); });
</script>

대충 이런 방식으로 구현합니다. 스크립트는 완전히 다른 파일에 따로 구현할 수 있고, 화면과 동작을 따로 구현할 수 있어서 훨씬 말끔하지요.

----

이번에도 사내게시판에 쓴 글을 옮겨왔습니다.
----
아래의 글에 이어서 <a href="#" onclick="...."> 의 말끔한 대안을 제안해봅니다.

보통 이렇게들 많이 쓰죠?

<a href="#" onclick="window.open('http://www.makeshop.co.kr/', 'makeshop', '....');">

이 방식은 치명적인 단점이 있습니다. href="#"에 의해서 페이지가 최상단으로 스크롤업 되버린다는거죠. 웹페이지의 사용성 측면에서 볼때 사용자가 보고있던 페이지 위치를 확 벗어나게 되니까 당황할 수가 있겠죠. 좋은 방법이 아닙니다.

그래서 많이들 쓰던 방법이 void();함수를 이용하는 것인데요,

<a href="javascript:void(0);" onclick="....">

위와 같은 형태로 쓰는겁니다. void() 함수는 아무것도 하지 않는 함수입니다. 그러니 클릭했을 때 실행되는 href값은 아무 일도 하지 않겠죠 ㅎㅎ 썩 괜찮은 대안이긴 합니다. void() 에 0을 넣지 않으면 firefox에서는 오류가 납니다.

그런데 void를 쓰는게 왠지 찜찜하기도 하고... 해서 약간 개선된 방법이 

<a href="javascript:;" onclick="....">

void()도 아무일 하지 않는 함수지만, ; 는 정말로 아무것도 하지 않는 문장이죠 ㅎㅎ 이 정도면 굉장히 말끔한 해결책이라고 생각



하고 오랜 세월을 살았었습니다. -,.-);;;

그런데 amazon.com에서 영어사전을 펼쳐놓고 원서를 주문하던 그 어느날, 분명히 팝업창인데도 불구하고 링크의 주소가 브라우저의 상태표시줄에 보여지는!! 기이한 현상을 발견하고 말았습니다. 원래 a링크에서의 href값은, 마우스를 링크에 오버하면 브라우저 상태표시줄에 표시가 되죠! 하지만 onclick절에 쓰여진 주소값이 보여질리 없건마는..........

즉시 "소스보기"를 열어 보았더니...

<a href="http://www.amazon.com/some/path/" onclick="window.open(this.href, '', ''); return false;">

오오! 이런 방법이. 저는 이것이 가장 말끔한 팝업창 띄우는 방법이라고 생각을 합니다.
-링크에 마우스 포인터를 가져가면 상태표시줄에 링크가 표시되므로 사용자가 미리 링크를 확인할 수가 있고요,
-행여 js가 작동하지 않는 상황에서도 링크가 의미를 가지고 작동을 한다.
-# 를 쓸때처럼 페이지가 이동하지도 않는다.
-그리고 별로 어렵지도 않다.

javascript와 사용성/웹표준에 대한 좀 더 포괄적인 문서는 http://hyeonseok.com/docs/accessible-javascript/

<a href="url"></a> href는 페이지 호출을 위한 것이기 때문에 스크립트를 호출하려면 <a href=javascript:함수명()></a>

onclick은 클릭시 스크립트를 호출하기 위함이기 때문에 별도로 명시하지 않아도 됨