a href="javascript:" vs a onclick="" vs ...

<a>는 버튼이 될 수 있다.

 

<a>는 앵커 Anchor라고 부르며, 다른 사이트로 이동할 수 있는 링크를 걸어줄 때 주로 사용하는 태그입니다.

href 속성에는 이동할 링크 주소를 넣을 수 있고 태그 안에는 화면에 보여질 텍스트를 넣을 수 있습니다.

<a href="naver.com">누르시오</a>

누르시오

파란 글씨와 밑줄이 앵커의 트레이드 마크라고 할 수 있지만 조금 촌스럽게 느껴지다 보니 최근에는 밑줄을 없애거나 색을 바꾸기도 합니다. 제가 사용하는 티스토리 테마에서도 앵커가 조금 다르게 표현이 되고 있는 것 같습니다.

HTML 태그 중에 <button>이 있지만 아무래도 스타일을 바꾸는 데 앵커가 더 편한 점이 있어서 앵커를 버튼으로 활용하는 경우가 많습니다.

앵커를 버튼으로 사용하려면 단순한 다른 페이지로의 이동 외에 다양한 기능을 수행할 수 있어야 합니다.

즉, click 이벤트를 처리하는 이벤트 리스너를 실행할 수 있어야 합니다.

 

<a>로 이벤트를 처리하는 방법

 

<a href="javascript:doSomething();">

 

href 속성에 javascript: 함수이름을 넣으면 앵커를 클릭했을 때 해당 함수가 실행됩니다.

하지만 이런 방식은 보안과 접근성 등의 이유로 권장하지 않습니다.

 

두 번째 방법

 

<a href="#" onclick="doSomething(); return false;">

href 속성에 null이라는 의미로 #을 넣어주고, onclick 속성으로 함수를 넣는 것이 조금 더 나은 방법입니다.

href="#"인 앵커를 클릭하면 화면 상단으로 이동하게 되므로 이를 방지하기 위해서 return false;를 추가해줍니다.

( onclick을 사용하지 않는 경우는 href="javascript:void(0);"나 조금 더 보기 좋게 href="javscript:" 와 같이 처리할 수 있습니다. event.preventDefault()를 사용하면 js에서 앵커의 default 기능을 실행하지 않도록 할 수 있습니다. )

하지만 이것 역시 최선이라고 할 수는 없습니다.

 

최선의 방법

<a href="#" class="some-btn">

let btn = document.querySelector(".some-btn");
btn.addEventListener("click", (e) => {
    e.preventDefault(); // 기본 기능(href="#"에 의한 화면 이동)의 실행을 방지
    doSomething();
})

function doSomething() {
    alert("hi");
}

이렇게 HTML과 JS를 분리하는 것이 가장 좋습니다. 그 이유는 다음과 같습니다.

HTML은 구조, CSS는 스타일, Javascript는 동작을 담당하고 있습니다. 관심사와 역할이 서로 다르기 때문에 HTML, CSS, JS를 분리하면 코드를 더 쉽게 이해할 수 있습니다. 유지보수도 용이해집니다. 같은 JS를 여러 HTML에서 사용할 수 있으며 추후에 수정할 때에도 JS만 고치면 여러 페이지에 적용이 됩니다.

태그의 style 속성을 통해 인라인 스타일을 지정할 수 있는데, 위와 같은 이유로 가급적이면 스타일 역시 CSS 파일에서 따로 정의하는 것이 좋습니다. 

성능이 향상됩니다. JS파일을 브라우저가 캐싱할 수 있으며 비동기 로드가 가능하기 때문입니다.

마지막으로 XSS 등의 공격으로부터 보다 안전하다는 보안상의 이점도 있습니다.

 

태그 안에 데이터를 저장하는 방법

 

<a href="#" class="some-btn" data-user-id="{userId}"></a>

 

 

태그 안에 데이터를 저장할 필요가 있을 때는 data- 속성을 사용합니다 

물론 속성의 이름은 사용자 마음대로 정의할 수 있지만 데이터를 저장하는 용도라면

data- 다음에 하이픈으로 연결한 변수명을 넣는 것이 바람직합니다.

 

btn.addEventListener("click", (e) => {
    e.preventDefault();
    doSomething(e.target.dataset.userId); 
    //data-user-id에 저장된 값을 가져올 때는 dataset.변수명으로 할 수 있습니다.
    //케밥케이스 user-id는 카멜케이스 userId로 바뀝니다.
})

//JQuery
$(".content_view_btn").on('click', function(e) {
    e.preventDefault();
    doSomething($(this).data("user-id"));
})