' <a> ' 태그 : 클릭 시 링크로 이동.
' href = "#" ' => 브라우저의 페이지 최상단으로 이동. (페이지 리로드X)
javascript:void(0)
주로 HTML에서 링크를 클릭했을 때 페이지를 리로드하거나 다른 페이지로 이동하지 않도록 하기 위해 사용.
- javascript 브라우저에서 링크를 클릭했을 때 JavaScript 코드를 실행하도록 지시하는 프로토콜.
- void : 결과를 무시하고 'undefined' 를 반환.
- void(0) : '0'을 평가하지만 그 값을 무시하고 'undefined' 를 반환.
'<a>' 태그의 'href' 속성으로 사용
<head>
<title>Example</title>
<script>
function showAlert() {
alert("Link clicked!");
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="showAlert()">링크</a>
</body>
링크 (<a>태그) 클릭
=> href = "javascript:void(0)" 으로 인해 페이지 이동이나 리로드가 일어나지 않음.
=> href = "javascript:void(0)" 으로 인해 JavaScript 함수인 showAlert()가 실행되어 alert가 뜸.
event.preventDefault()
<head>
<script>
function showAlert(event) {
event.preventDefault();
alert("Link clicked!");
}
</script>
</head>
<body>
<a href="#" onclick="showAlert(event)">링크</a>
</body>
링크(<a>태그) 클릭
=> 이벤트 핸들러인 onclick이벤트 감지 => showAlert() 함수 실행.
=> showAlert() 함수의 event.preventDefault() 로 인해 a태그의 기본동작인 페이지 이동이 일어나지 않음.
** a태그의 기본동작인 페이지 이동보다 이벤트 핸들러가 더 먼저 실행 **
<head>
<script>
function showAlert(event) {
alert("Link clicked!");
}
</script>
</head>
<body>
<a href="#" onclick="showAlert(event)">링크</a>
</body>
링크(<a>태그) 클릭
=> showAlert()가 실행되어 alert가 뜸.
=> href = "#" 으로 인해 페이지 최상단으로 이동.
'JavaScript > 공부공부' 카테고리의 다른 글
| [JS] sort(), localeCompare() 함수 (문자열비교) (0) | 2024.08.19 |
|---|---|
| [jQuery] .load() 함수 (0) | 2024.08.11 |
| [JS] 배열값 비교 (include, '===') / Java_List 비교 (0) | 2024.06.19 |
| [JS] 고차함수 (2) closure, currying (0) | 2024.06.15 |
| [JS] 고차함수 (1) map, filter, reduce (0) | 2024.06.15 |