JavaScript를 직접 호출할 때 href와 onClick은 서로 다른 동작 방식을 보입니다. 특히 두 클릭 사이의 시간 간격이 짧을 경우, href 속성에 작성된 스크립트는 실행되지 않을 수 있다는 점을 유의해야 합니다.
href와 onClick의 동작 차이
두 방식 모두 앵커(<a>) 태그에서 JavaScript 함수를 호출하는 데 사용되지만, 내부적으로 처리되는 방식이 다릅니다.
- href="javascript:함수명()" — 링크 이동 자체를 JavaScript 코드로 대체하는 방식으로, 브라우저에 따라 실행 타이밍이 달라질 수 있습니다.
- onclick="javascript:함수명()" — 클릭 이벤트가 발생했을 때 스크립트를 실행하는 방식으로, 일반적으로 더 안정적이고 권장되는 패턴입니다.
예제 코드
다음 예제는 JavaScript에서 href와 onClick의 사용법을 비교하여 보여줍니다.
<html>
<head>
<title>JavaScript href vs onClick()</title>
<script>
function myFunc() {
var v = 0;
for (var j = 0; j < 1000; j++) {
v += j;
}
alert(v);
}
</script>
</head>
<body>
<a href="javascript:myFunc()">href 방식</a>
<a href="#" onclick="javascript:myFunc()">onclick 방식</a>
</body>
</html>어떤 방식을 선택해야 할까?
일반적으로 onclick 이벤트 핸들러를 사용하는 것이 권장됩니다. href에 JavaScript를 직접 넣는 방식(javascript: URL)은 코드 가독성을 떨어뜨리고, 콘텐츠 보안 정책(CSP) 환경에서 차단될 수 있으며, 북마크나 새 탭 열기 등 기본 링크 기능과 충돌할 수 있기 때문입니다.
또한 최신 개발 트렌드에서는 HTML과 JavaScript를 분리하기 위해 addEventListener()를 활용한 이벤트 바인딩 방식을 사용하는 것이 가장 좋은 실천 방법으로 여겨집니다.