본문 바로가기
Frontend/Javascript

javascript void(0) 의미

by 새벽물망초 2021. 12. 7.

기본적인 사용법 : a 태그에 onclick 사용하기

어떤 하나의 html 요소를 클릭하여 이벤트를 발생시켰을 경우, 자바스크립트로 어떠한 동작이 일으나게끔 컨트롤해야 할 때가 많이 있습니다.
특히, <a></a>태그를 이용한 하면 마우스를 가져다 올렸을 때에 페이지 이동을 하는 것을 쉽게 알게끔 해줄 수가 있죠.
이런 이유 때문에 자바스크립트의 이벤트 핸들러인 onclick 등을 지정/사용해서 명시적으로 클릭을 유도할 경우 상당히 많이 사용을 하게 되는데요~.

보통은 이 a 태그를 클릭하게 되면 그 속성 중에 하나인 href에 지정한 url로 페이지가 바뀌면서 이동을 하게 되죠.
그렇게 페이지가 바뀌면서 이동을 하지 않게 하고 싶다 할 때에 이 javascript void(0)을 사용하면 됩니다.

쉽게 말하면, a 태그의 디자인성은 살리면서 링크 기능을 없애는 것

 

javascript void(0) 을 사용해서 html 요소인 a 태그의 페이지 변환/이동 기능 무효화 시키기

아래의 소스 코드들처럼 작성하면 됩니다.

 
<a href="javascript:void(0)">HTML요소기능무효화</a>

<a href="javascript:void(0)">링크기능무효화</a>

href 속성값에 javascript:void(0)을 지정함으로써 링크 기능을 무효화하는 방법입니다.
먼저,
1. 여기에서 void 연산자undefind 값을 돌려줍니다.
2. 그러면, a 태그의 href 속성 값undefind 값이 지정이 되는데, 이럴 경우 아무런 동작을 하지 않게 됩니다.
void(0)의 경우, () 안의 값이 숫자나 영문자 등등을 사용해도 문제는 없지만, 일반적으로 숫자 0을 사용합니다.

 

출처: https://m.blog.naver.com/skydoor2014/221141848372

 

댓글