기본적인 사용법 : 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을 사용합니다.
'Frontend > Javascript' 카테고리의 다른 글
return false로 안넘어가고 submit되는 경우 (0) | 2022.03.25 |
---|---|
alert창 나타나게 하는법 (0) | 2022.03.24 |
var, let, const 비교 (1) (0) | 2021.12.06 |
sort(function(a,b){return a-b}) 오름차순, 내림차순 (0) | 2021.12.06 |
자바스크립트 (0) | 2021.12.02 |
댓글