[JavaScript] preventDefault 란, event.preventDefault, preventDefault()
자바스크립트 메소드중 preventDefault 라는 녀석이 있습니다.
이 메소드는 브라우저의 기본 동작을 실행하지 않도록 하는 메소드입니다.
기본적인 동작이 정해져 있는 대표적인 예시는 다음과 같은 것들이 있습니다.
1) checkbox태그 클릭시 체크가 됨.
2) a태그 클릭시 href 속성에 적힌 url로 이동
3) form 태그 안 submit 버튼클릭시 action 속성값으로 파라미터 전달하면서 페이지 이동
예를들어 아래와 같은 html 파일을 생성하여 수행해봅시다.
<html>
<input type="checkbox" />
<a href="https://google.com"> google</a>
<form action="google.com">
<input type="text" />
<input type="submit" />
</form>
</html>
각 태그들에 대해 마우스 클릭을 하면 아래와 같이 반응을 하게 됩니다.
이러한 동작을 막기 위해 각 태그별로 preventDefault를 이벤트 리스너에 등록하면
기본동작을 막을 수 있습니다.
작성 예시는 아래와 같습니다.
preventDefault() 이후에 alert창을 띄우도록 하였습니다.
그러면 창을 이동하지 않고 alert 창만 띄우겠지요.
<html>
<script>
window.onload = function(){
document.getElementById("checkbox").addEventListener("click", function(event){
event.preventDefault();
window.alert('test');
});
document.getElementById("anchor").addEventListener("click", function(event){
event.preventDefault();
window.alert('test');
});
document.getElementById("form").addEventListener("submit", function(event){
event.preventDefault();
window.alert('test');
});
}
</script>
<input type="checkbox" id="checkbox" />
<a href="https://google.com" id="anchor">google</a>
<form action="https://google.com" id="form">
<input type="text" />
<input type="submit" />
</form>
</html>
이렇게 작성후 각각을 클릭하면, 아까와는 다르게 아무런 alert창만 뜨고, 기본 동작을 안하는것을 확인할 수 있습니다.
총평
우연히 preventDefault라는게 있는것을 알게 되었는데, 제가 코드를 작성할때 이 메소드를 써본 적은 없습니다.
과연 무슨필요가 있을지 싶다라는 생각이 듭니다.
보통 HTML 태그의 기본 이벤트를 인지하고 사용하기에 굳이 필요한가 싶기도 하고,
굳이 기본동작에 해당하는 이벤트를 수행하지 않게 하려면 태그를 바꾸는 명료한 방법도 있습니다.
제 생각으로는 SEO 떄문에 태그를 사용한다거나, 크로스 브라우징이 문제될만한 요소들에 대해서 쓸 수 있지 않을까 싶습니다.
굳이 이것을 알고 잘 써먹어야겠다는 생각을 딱히 하지는 않고, 이런게 있구나라는 생각을 가지고,
자바스크립트로 이런것도 할 수 있구나 라는 것을 알아두기만 하면 다른 코드를 읽을 때 언젠가 한번 마주치지 않을까 싶습니다.
#자바스크립트,#스크립트,#preventDefault,#javascript,#script,#js,#event
[JavaScript] What is preventDefault, event.preventDefault, preventDefault()
preventDefault, event.preventDefault, preventDefault()Among the JavaScript methods, there is a thing called preventDefault.This method disables the browser’s default behavior. Representative examples
devscb.com
'자바스크립트 - Javascript' 카테고리의 다른 글
| javascript로 form 태그 연속 submit 방지 코드, 중복 submit 방지 (0) | 2023.11.01 |
|---|---|
| Xpath란, 크롬 개발자도구에서 Xpath 확인하기 (0) | 2023.03.24 |
| node.js에서 selenium 사용하기 (chrome) (0) | 2022.11.27 |
| vs code에서 node js 에서 mocha 시작하기 , visual studio code 에서 nodejs javascript mocha 테스트하기, 시작하기 (0) | 2022.11.26 |
| Javascript 패키지 매니저 pnpm, pnpm이란?, pnpm사용이유, pnpm 설치방법, pnpm 사용방법 (0) | 2022.11.02 |
댓글