▼ HTML, JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a id="link" href="https://www.naver.com.kr/">Link</a>
<input type="checkbox" id="checkbox">
<input type="text" id="input" placeholder="input">
<p id="text">네이버 접속하기</p>
<script src="index.js"></script>
</body>
</body>
</html>// 브라우저의 기본 동작
const link = document.querySelector("#link");
const checkbox = document.querySelector("#checkbox");
const input = document.querySelector("#input");
const text = document.querySelector("#text");대부분의 이벤트는 발생하는 순간 각 태그별로 혹은 문서 전체적인 측면에서
브라우저가 기본적으로 갖고 있는 어떠한 동작들을 수행한다.
▼ 사용자가 웹 페이지를 사용하면서 흔하게 접하는 이벤트
- <a> 태그는 클릭했을 때 href 속성에 담긴 주소로 웹 페이지 이동
- checkbox는 클릭을 했을 때 체크가 toggle
- text type은 클릭했을 때 태그에 focus가 되어 커서가 깜빡이면서 입력 가능한 상태를 알려줌
- input text에서 키보드를 누르면 그 누른 키에 해당하는 값을 그대로 입력
- 일반 텍스트 위에서도 마우스를 드래그하면 하늘색 글씨로 바뀜
- 마우스 오른쪽 클릭 시 옵션 창 표시 등등
이러한 동작들이 모두 브라우저가 기본적으로 수행하는 동작들이라고 할 수 있다.
이 밖에도 브라우저가 기본적으로 가지고 있는 다양한 동작들이 더 있기도 하다.
그런데 사용자가 상황에 따라서 이런 기본 동작들을 원하지 않을 수도 있을 것인데
아마 마우스 오른쪽 클릭 방지하는 기능을 한 번쯤 경험해 봤을 것이다.
아무튼 자바스크립트를 활용하여 이 이벤트 객체로 브라우저의 기본 동작들을 막을 수 있다.
preventDefault 메소드 - 브라우저의 기본 동작 막기
a 태그의 경우에는 클릭했을 때 href 속성의 주소로 이동하는 것으로,
클릭 타입의 이벤트 핸들러를 한번 만들어 기본 동작을 제어할 수 있다.
// 브라우저의 기본 동작
const link = document.querySelector("#link");
const checkbox = document.querySelector("#checkbox");
const input = document.querySelector("#input");
const text = document.querySelector("#text");
//event.preventDefault
link.addEventListener("click", function (e) {
e.preventDefault();
alert("이동 불가");
});
이렇게 preventDafault 메소드를 이용해서 브라우저의 기본적인 동작을 막고 경고 창을 띄울 수 있다.
키보드 이벤트 같은 경우에는 if문을 활용해서 특정한 상황에서만 기본 동작을 막으며
체크박스가 체크되지 않으면 input 태그에 키가 입력되지 않게 적용하였다.
// 브라우저의 기본 동작
const link = document.querySelector("#link");
const checkbox = document.querySelector("#checkbox");
const input = document.querySelector("#input");
const text = document.querySelector("#text");
//event.preventDefault
link.addEventListener("click", function (e) {
e.preventDefault();
alert("이동 불가");
});
input.addEventListener('keydown', function (e) {
if(!checkbox.checked){
e.preventDefault();
alert('체크박스를 먼저 클릭하세요.')
}
})
마우스 오른쪽 클릭은 컨텍스트 메뉴라는 타입으로 이벤트가 발생한다.
텍스트에 컨텍스트 메뉴 타입으로 이벤트 핸들러를 등록할 때
브라우저의 기본동작을 막고 경고창을 띄우게 된다.
// 브라우저의 기본 동작
const link = document.querySelector("#link");
const checkbox = document.querySelector("#checkbox");
const input = document.querySelector("#input");
const text = document.querySelector("#text");
//event.preventDefault
link.addEventListener("click", function (e) {
e.preventDefault();
alert("이동 불가");
});
input.addEventListener("keydown", function (e) {
if (!checkbox.checked) {
e.preventDefault();
alert("체크박스를 먼저 클릭하세요.");
}
});
text.addEventListener("contextmenu", function (e) {
e.preventDefault();
alert("마우스 오른쪽 클릭 사용 불가");
});만약에 웹 페이지 문서 전체로 적용하려면 window나 document 객체에 할당해주면 된다.
ex) window.addEventListener
이렇게 이벤트 객체의 preventDefault 메소드를 활용하면
브라우저의 기본동작을 막으며 원하는 대로 동작을 바꿀 수 있다.
그런데 이벤트 버블링을 막는 것도 조심해야한다고 강조했던 것처럼
브라우저의 기본동작을 막는 일도 꼭 필요한 일인지 확인하고 적용하는 것이 좋다.
특히나 HTML 태그에 존재하는 브라우저의 기본 동작을 다루는 경우에는
각 HTML 태그들이 가지고 있는 고유의 기능이 문제가 생길 수 있기 때문에
꼭 필요한 경우에만 활용하는 것이 좋다.
▼GitHub
JavaScript_soloPlay/interactive_JS/17.브라우저기본동작 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (19) Interactive JavaScript (Event) - 마우스 이동 이벤트 (0) | 2024.11.13 |
|---|---|
| (18) Interactive JavaScript (Event) - 마우스 버튼 이벤트 (0) | 2024.11.12 |
| (16) Interactive JavaScript (Event) - 이벤트 위임 (0) | 2024.11.08 |
| (15) Interactive JavaScript (Event) - 이벤트 버블링 (0) | 2024.11.07 |
| (14) Interactive JavaScript (Event) - 이벤트 객체 (0) | 2024.11.06 |