12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

12. 클릭하고 반응하기 (이벤트 처리)/12.2 이벤트 객체 활용하기

12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

thejavascript4kids 2025. 7. 16. 09:17

📘 12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

여러분과 함께 하는 이 순간이 소중합니다. 지난 시간에 이벤트 객체를 통해 웹페이지에서 일어나는 다양한 정보를 확인하는 방법을 배웠어요. 이제는 한 걸음 더 나아가서, 브라우저가 자동으로 하는 일들을 우리가 조용히 조절할 수 있는 특별한 기능을 배워볼 거예요. 바로 preventDefault라는 섬세한 도구랍니다.

🧠 새로운 단어들과 친해지기

웹페이지에서 브라우저의 자동 동작을 제어하는 중요한 단어들을 살펴보겠어요.

단어	쉬운 설명
preventDefault	브라우저의 기본 동작을 조용히 멈추게 하는 특별한 기능이에요.
기본 동작	브라우저가 자동으로 수행하는 여러 동작들을 말해요.
폼 제출	사용자가 입력한 정보를 서버로 보내는 과정이에요.
이벤트 제어	이벤트의 동작을 개발자가 원하는 대로 조절하는 거예요.

preventDefault는 "prevent(막다)"와 "default(기본)"가 합쳐진 말로, 말 그대로 기본적으로 일어나려는 일을 조용히 막는다는 뜻이에요.

✨ `preventDefault`의 핵심 개념

웹브라우저는 마치 섬세한 자동 시스템처럼 작동해요. 사용자가 링크를 클릭하면 자동으로 다른 페이지로 이동하고, 폼을 제출하면 자동으로 페이지를 새로고침하며, 우클릭을 하면 자동으로 메뉴가 나타나요. 이런 자동 기능들은 대부분의 경우 매우 유용하지만, 때로는 우리가 다른 특별한 일을 하고 싶을 때가 있어요.

preventDefault는 이런 브라우저의 자동 기능을 일시적으로 멈추게 하는 섬세한 도구 역할을 해요. 마치 조용한 음악을 듣다가 중요한 전화가 올 때 일시정지를 누르는 것과 같은 상황이죠. 이 기능을 사용하면 브라우저의 기본 동작을 막고, 대신 우리가 원하는 특별한 동작을 실행할 수 있어요.

이는 현대 웹 개발에서 사용자가 더 편안하게 느끼는 것을 만드는 중요한 도구예요. 예를 들어, 폼을 제출할 때 페이지가 새로고침되는 대신 부드럽게 처리하거나, 링크를 클릭했을 때 즉시 페이지가 바뀌는 대신 자연스러운 변화와 함께 이동하는 것이 가능해져요.

일상 속 비유: 조용한 시간 조절 이야기

preventDefault를 더 자연스럽게 이해하기 위해 '조용한 시간 조절' 이야기를 들려드릴게요.

여러분 집에는 여러 가지 자동으로 작동하는 것들이 있어요. 전자레인지는 "데우기" 버튼을 누르면 자동으로 2분간 음식을 데워주고, 세탁기는 "표준" 버튼을 누르면 자동으로 1시간 동안 세탁해줘요. 평소에는 이런 자동 기능이 매우 편리하죠.

하지만 때로는 특별한 상황이 있어요. 예를 들어, 전자레인지로 음식을 데울 때 2분이 아니라 30초만 데우고 싶다거나, 세탁기로 옷을 빨 때 1시간이 아니라 30분만 돌리고 싶을 수 있어요. 이럴 때는 자동 모드를 조용히 끄고(preventDefault), 수동으로 직접 시간을 설정하는 모드로 바꿔야 해요.

웹브라우저도 이와 같아요. 링크를 클릭하면 자동으로 페이지 이동을 하지만, 때로는 이 자동 기능을 조용히 끄고 우리가 원하는 특별한 일을 하고 싶을 때가 있어요. 그럴 때 preventDefault를 사용하는 거예요.

🎯 `preventDefault`를 사용하는 이유

그렇다면 개발자들은 왜 브라우저의 편리한 자동 기능을 일부러 끄려고 할까요? 여러 중요한 이유들이 있어요.

첫 번째로 더 나은 사용자 경험을 만들기 위해서예요. 예를 들어, 온라인 쇼핑몰에서 장바구니에 상품을 담을 때 페이지가 갑자기 새로고침되면서 깜빡이는 것보다는, 부드럽게 "상품이 담겼습니다"라는 메시지가 나타나는 것이 훨씬 더 자연스럽고 편안해요.

두 번째로 정보를 더 안전하게 다루기 위해서예요. 학교에서 온라인 과제를 제출할 때 기본 제출 기능을 사용하면 입력된 정보가 올바른지 확인하기 어려워요. 하지만 preventDefault로 기본 동작을 막고 JavaScript로 처리하면, 입력값을 미리 검사해서 올바르지 않은 정보는 제출되지 않도록 막을 수 있어요.

세 번째로 특별한 기능 구현을 위해서예요. 블로그 링크를 클릭했을 때 즉시 다른 페이지로 이동하는 대신, 먼저 "정말 이동하시겠습니까?"라고 물어보거나, 부드러운 변화와 함께 이동하는 것이 가능해져요.

마지막으로 접근성 향상을 위해서예요. 일부 사용자들은 마우스 우클릭 메뉴 대신 더 간단하고 명확한 메뉴를 선호할 수 있어요. 이런 경우 기본 우클릭 메뉴를 막고 사용자 맞춤형 메뉴를 제공할 수 있어요.

⚙️ 기본 사용법 배우기

preventDefault의 사용법은 놀랍도록 간단해요. 이벤트 듣는 도우미 함수에서 이벤트 객체를 받아서 호출하기만 하면 돼요.

요소.addEventListener("이벤트종류", function(event) {
    event.preventDefault(); // 브라우저의 기본 동작을 멈춤
    // 여기에 원하는 동작을 작성
});

예시:

// 링크 클릭 시 페이지 이동을 막는 예시
let myLink = document.getElementById("specialLink");
myLink.addEventListener("click", function(event) {
    event.preventDefault(); // 페이지 이동 방지
    console.log("페이지 이동이 막혔어요!");
});

자주 막는 기본 동작들:

가장 흔히 막는 기본 동작들을 알아두면 도움이 돼요. 링크 클릭은 자동으로 href 속성의 주소로 이동하는 것을 막을 수 있고, 폼 제출은 자동으로 페이지가 새로고침되는 것을 방지할 수 있어요. 우클릭은 메뉴가 나타나는 것을 막을 수 있고, 키보드 입력은 브라우저의 기본 단축키 동작을 막을 수 있어요.

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 preventDefault가 어떻게 작동하는지 자세히 살펴볼게요.

🔹 첫 번째 예시: 링크 클릭해도 페이지 이동 말고 "이동 막았어요!"라는 메시지를 띄워보자

첫 번째 예시에서는 링크를 클릭해도 다른 페이지로 이동하지 않도록 하는 방법을 배워볼게요.

// 특별한 링크 요소를 찾아와서 변수에 저장해요
let specialLink = document.getElementById("specialLink");

// 클릭 이벤트가 발생했을 때 실행될 함수를 붙여요
specialLink.addEventListener("click", function(event) {
    // 기본 동작(페이지 이동)을 막아요
    event.preventDefault();

    // 대신 우리가 원하는 동작을 실행해요
    console.log("링크를 클릭했지만 페이지는 이동하지 않았어요!");
    alert("이동 막았어요!");

    // 링크의 모양을 변경해서 클릭되었음을 보여줘요
    specialLink.style.color = "purple";
    specialLink.textContent = "클릭됨!";
});

이 과정을 차근차근 살펴보면, 먼저 특별한 동작을 할 링크를 찾아와요. 그다음 클릭 이벤트 듣는 도우미를 붙이고, 이벤트가 발생했을 때 preventDefault로 기본 동작을 막아요. 마지막으로 페이지 이동 대신 우리가 원하는 동작(메시지 표시, 색상 변경)을 실행하죠. 이렇게 하면 사용자가 링크를 클릭해도 갑자기 다른 페이지로 이동하지 않고, 현재 페이지에서 우리가 준비한 특별한 경험을 할 수 있어요.

🔹 두 번째 예시: 폼 제출해도 새로고침되지 않고, 이름을 받아서 "안녕~ ○○!"이라고 말해보자

두 번째 예시에서는 폼을 제출해도 페이지가 새로고침되지 않도록 하는 방법을 배워볼게요.

// 특별하게 처리할 폼 요소를 찾아와요
let smartForm = document.getElementById("smartForm");

// 폼 제출 이벤트가 발생했을 때 실행될 함수를 붙여요
smartForm.addEventListener("submit", function(event) {
    // 기본 동작(새로고침)을 막아요
    event.preventDefault();

    // 사용자가 입력한 값을 가져와요
    let nameInput = document.getElementById("userName");
    let inputValue = nameInput.value;

    // 입력값이 있는지 확인해요
    if (inputValue.trim() === "") {
        alert("이름을 입력해주세요!");
        return;
    }

    // 새로고침 없이 결과를 보여줘요
    alert("안녕~ " + inputValue + "님!");
    console.log("폼이 제출되었지만 페이지는 새로고침되지 않았어요!");
});

이 예시를 차근차근 분석해보면, 먼저 폼 요소를 찾아와서 submit 이벤트 듣는 도우미를 붙여요. 사용자가 폼을 제출하면 preventDefault로 페이지 새로고침을 막고, 대신 JavaScript로 입력값을 확인하고 처리해요. 이렇게 하면 사용자가 입력한 정보가 사라지지 않고, 페이지가 깜빡이지도 않으면서 부드럽게 결과를 보여줄 수 있어요.

🔹 세 번째 예시: 우클릭을 막고 "이건 보호된 공간이에요!"라는 메시지를 보여주자

세 번째 예시에서는 특정 영역에서 우클릭 메뉴가 나타나지 않도록 하는 방법을 배워볼게요.

// 보호할 특별한 영역을 찾아와요
let protectedArea = document.getElementById("secretArea");

// 우클릭(메뉴 나타내기) 이벤트가 발생했을 때 실행될 함수를 붙여요
protectedArea.addEventListener("contextmenu", function(event) {
    // 기본 동작(우클릭 메뉴 표시)을 막아요
    event.preventDefault();

    // 대신 우리만의 메시지를 보여줘요
    alert("이건 보호된 공간이에요!");
    console.log("우클릭 메뉴가 차단되었어요.");

    // 영역의 색상을 잠깐 바꿔서 보호되고 있음을 보여줘요
    protectedArea.style.backgroundColor = "lightcoral";

    // 2초 후에 원래 색으로 되돌려요
    setTimeout(function() {
        protectedArea.style.backgroundColor = "lightblue";
    }, 2000);
});

이 예시를 통해 특정 영역에서 우클릭 기능을 제어하는 방법을 배울 수 있어요. 먼저 보호할 영역을 찾아와서 contextmenu 이벤트 듣는 도우미를 붙이고, 우클릭이 발생하면 preventDefault로 기본 메뉴 표시를 막아요. 그리고 보호되고 있다는 것을 사용자에게 알려주고, 시각적 피드백을 제공하죠. 이런 방식으로 중요한 콘텐츠나 이미지를 보호할 수 있어요.

🔄 `preventDefault` 사용 순서 정리하기

지금까지 학습한 preventDefault의 사용 단계를 자연스럽게 정리해볼게요.

첫 번째 단계는 상황 파악이에요. 어떤 브라우저의 기본 동작을 막아야 하는지 먼저 명확히 해야 해요. 링크 클릭, 폼 제출, 우클릭 등 다양한 상황 중에서 어떤 것을 제어할지 결정하는 거죠.

두 번째는 이벤트 등록 단계예요. 해당 요소에 적절한 이벤트 듣는 도우미를 붙이고, 함수에서 event 매개변수를 받을 수 있도록 준비해요. 이때 이벤트 객체를 받는 것을 잊지 않는 것이 중요해요.

세 번째는 기본 동작 차단 단계예요. 이벤트 함수의 적절한 위치에 event.preventDefault()를 호출하여 브라우저의 자동 기능을 멈춰요. 보통 함수의 시작 부분에 작성하는 것이 좋아요.

마지막 단계는 대체 동작 실행이에요. 기본 동작을 막았으므로, 사용자에게 더 나은 경험을 제공할 대체 동작을 구현해야 해요. 이때 사용자가 혼란스러워하지 않도록 명확한 피드백을 제공하는 것이 중요해요.

🧚‍♀️ 이야기로 다시 배우기: 조용한 도서관의 시간 조절 이야기

지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?

어느 조용한 오후, 우리 동네 도서관에는 여러 가지 자동 시스템들이 있었어요. 출입문은 카드를 찍으면 자동으로 열리고, 대출기는 바코드를 스캔하면 자동으로 책을 대출해주며, 복사기는 버튼을 누르면 자동으로 복사를 시작했어요.

하지만 도서관에는 특별한 시간 조절 도우미가 하나 있었어요. 이 도우미에게는 "자동 기능 일시 정지"라는 특별한 능력이 있었어요. 바로 preventDefault 능력이었어요!

예를 들어, 평소에는 대출기의 바코드 스캔 버튼을 누르면 자동으로 대출이 되지만, 도서관에서 특별한 이벤트를 할 때는 어떨까요? 책을 스캔해도 바로 대출되는 대신 "오늘은 특별한 날이에요! 이 책과 함께 기념사진을 찍어보세요"라는 메시지를 보여주고 싶을 수 있어요.

이때 시간 조절 도우미가 자동 대출 기능을 조용히 멈추고(preventDefault), 대신 특별한 이벤트 안내를 제공할 수 있죠.

복사기도 마찬가지예요. 평소에는 복사 버튼을 누르면 자동으로 복사가 시작되지만, 도서관에서 환경보호 캠페인을 할 때는 자동 복사를 멈추고(preventDefault) 대신 "정말 꼭 필요한 복사인가요? 환경을 생각해주세요"라는 메시지를 보여줄 수 있어요.

이처럼 preventDefault는 자동 기능을 조용히 멈추고 우리만의 특별한 설정을 만들어주는 섬세한 도구예요. 평소의 편리함은 그대로 유지하면서, 필요할 때만 우리가 원하는 방식으로 조절할 수 있는 거죠.

🧠 자주 하는 실수와 주의할 점

preventDefault를 사용할 때 주의해야 할 몇 가지 실수들을 미리 알아두면 더 안전하게 사용할 수 있어요.

❌ 실수 1: 이벤트 객체 없이 preventDefault 호출하기

// 잘못된 방법
myButton.addEventListener("click", function() {
    preventDefault(); // 에러! event 객체가 없어요
});

// 올바른 방법
myButton.addEventListener("click", function(event) {
    event.preventDefault(); // 정상 작동해요
});

이런 실수가 발생하는 이유는 preventDefault가 이벤트 객체의 메서드이기 때문이에요. 이벤트 듣는 도우미 함수에서 event 매개변수를 받지 않으면 preventDefault를 사용할 수 없어요. 마치 리모컨 없이 TV를 조작하려는 것과 같은 상황이죠.

❌ 실수 2: preventDefault 호출을 깜빡하고 기본 동작이 계속 일어남

// 문제가 되는 경우
myLink.addEventListener("click", function(event) {
    console.log("링크 클릭됨"); // 메시지는 출력되지만
    // event.preventDefault(); 이 줄을 깜빡했어요!
    // 여전히 페이지가 이동해버려요
});

// 올바른 방법
myLink.addEventListener("click", function(event) {
    event.preventDefault(); // 기본 동작을 먼저 막기
    console.log("링크 클릭됨, 페이지 이동 안함");
});

이는 가장 흔한 실수 중 하나예요. 특별한 동작을 추가했지만 preventDefault를 호출하지 않으면, 우리가 원하는 동작과 브라우저의 기본 동작이 동시에 일어나서 예상과 다른 결과가 나타날 수 있어요.

❌ 실수 3: 모든 곳에 무분별하게 preventDefault 사용하기

// 문제가 될 수 있는 방법
document.addEventListener("click", function(event) {
    event.preventDefault(); // 모든 클릭을 막아버려요!
    // 일반적인 버튼이나 링크도 작동하지 않을 수 있어요
});

// 선택적으로 사용하는 좋은 방법
document.getElementById("specialButton").addEventListener("click", function(event) {
    event.preventDefault(); // 특정 버튼만 선택적으로 막기
    console.log("특별한 버튼이 클릭되었어요");
});

preventDefault는 정말 필요한 경우에만 선택적으로 사용해야 해요. 모든 곳에 사용하면 웹페이지의 기본적인 기능들이 작동하지 않아서 사용자가 혼란스러워할 수 있어요. 마치 집안의 모든 자동 기능을 다 꺼버리면 불편해지는 것과 같아요.

✏️ 연습문제로 개념 다지기

이제 배운 내용을 잘 이해했는지 확인해보는 시간이에요. 여러분의 마음속에 이런 생각이 조용히 스며들기를 바라요. preventDefault를 사용하는 일은 단순한 기능 차단이 아니라, 사용자에게 더 섬세하고 배려 깊은 경험을 제공하기 위한 따뜻한 마음이라는 것을요. 마치 시끄러운 곳에서 조용히 대화할 수 있는 공간을 만들어주는 것처럼요.

Ex1) 링크 클릭하면 페이지 이동 말고 "이동 막았어요!"라는 메시지를 띄워보자

// 링크 요소를 찾아서 변수에 저장해요
let myLink = document.getElementById("myLink");

// 클릭 이벤트 듣는 도우미를 붙이고 preventDefault를 사용해요
myLink.addEventListener("click", function(event) {
    event.preventDefault(); // 페이지 이동을 막아요
    alert("이동 막았어요!"); // 대신 이 메시지를 띄워요
});

이 연습을 통해 preventDefault의 가장 기본적인 사용법을 익힐 수 있어요.

Ex2) 폼 제출해도 새로고침되지 않고, 이름을 받아서 "안녕~ ○○!"이라고 말해보자

// 폼 요소를 찾아서 변수에 저장해요
let myForm = document.getElementById("nameForm");

// submit 이벤트 듣는 도우미를 붙여요
myForm.addEventListener("submit", function(event) {
    event.preventDefault(); // 새로고침을 막아요

    // 입력 필드에서 값을 가져와서 출력해요
    let nameInput = document.getElementById("nameInput");
    alert("안녕~ " + nameInput.value + "님!");
});

이 문제는 폼 처리에서 preventDefault를 사용하는 방법을 연습하는 데 도움이 돼요.

Ex3) 우클릭을 막고 "이건 보호된 공간이에요!"라는 메시지를 보여주자

// 보호할 영역을 찾아서 변수에 저장해요
let protectedDiv = document.getElementById("protectedArea");

// contextmenu 이벤트 듣는 도우미를 붙여요
protectedDiv.addEventListener("contextmenu", function(event) {
    event.preventDefault(); // 우클릭 메뉴를 막아요
    alert("이건 보호된 공간이에요!"); // 대신 이 메시지를 띄워요
});

이 연습문제를 통해 다양한 이벤트에서 preventDefault를 활용하는 방법을 배울 수 있어요.

📚 11단원 복습문제 - DOM 조작 기억하기

12단원을 배우면서 11단원에서 배운 DOM 조작도 함께 기억해볼까요?

복습문제 1: preventDefault와 DOM 조작을 함께 사용하기

// 11단원에서 배운 DOM 조작과 12단원의 preventDefault를 함께 사용해보세요
let commentForm = document.getElementById("commentForm");
let commentList = document.getElementById("commentList");

commentForm.addEventListener("submit", function(event) {
    // 폼 제출의 기본 동작(새로고침) 막기
    event.preventDefault();

    // 입력된 댓글 내용 가져오기
    let commentInput = document.getElementById("commentInput");
    let commentText = commentInput.value.trim();

    // 댓글이 비어있으면 경고
    if (commentText === "") {
        alert("댓글을 입력해주세요!");
        return;
    }

    // 11단원에서 배운 createElement로 새 댓글 요소 만들기
    let newComment = document.createElement("div");
    newComment.className = "comment";
    newComment.style.padding = "10px";
    newComment.style.marginBottom = "5px";
    newComment.style.backgroundColor = "lightgray";
    newComment.textContent = commentText;

    // 11단원에서 배운 appendChild로 댓글 목록에 추가하기
    commentList.appendChild(newComment);

    // 입력창 비우기
    commentInput.value = "";

    console.log("✅ preventDefault로 새로고침을 막고 DOM 조작으로 댓글을 추가했어요!");
});

해설: 11단원에서 배운 createElement, appendChild 같은 DOM 조작 기능과 12단원의 preventDefault를 함께 사용하면 매우 부드러운 사용자 경험을 만들 수 있어요! 폼 제출의 기본 동작을 막고, 페이지 새로고침 없이 JavaScript로 새로운 내용을 DOM에 추가하는 방식이죠. 이렇게 하면 사용자가 입력한 정보가 사라지지 않으면서도 실시간으로 결과를 볼 수 있답니다.

🤔 심화 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 preventDefault에 대한 이해를 확인해보겠어요.

Q1. `preventDefault`를 사용하는 가장 중요한 이유 세 가지를 말해보세요.

정답: 1) 더 나은 사용자 경험을 제공하기 위해 (페이지 깜빡임 없는 부드러운 처리), 2) 정보를 더 안전하게 검증하고 처리하기 위해 (입력값 확인 후 제출), 3) 특별한 기능을 구현하기 위해 (커스텀 동작 추가)예요.

Q2. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

let submitButton = document.getElementById("submitBtn");
submitButton.addEventListener("click", function() {
    preventDefault();
    alert("버튼 클릭됨!");
});

정답: 이벤트 객체를 매개변수로 받지 않았어요. 올바른 코드는:

let submitButton = document.getElementById("submitBtn");
submitButton.addEventListener("click", function(event) {
    event.preventDefault();
    alert("버튼 클릭됨!");
});

해설: preventDefault는 이벤트 객체의 메서드이므로, 반드시 event 매개변수를 통해 접근해야 해요. 이벤트 객체 없이 직접 호출하면 오류가 발생해요.

지금까지 preventDefault의 모든 특성과 활용법을 자세히 알아보았어요. 이 기능은 웹페이지를 더 똑똑하고 사용자 친화적으로 만들어주는 중요한 도구예요. 브라우저의 기본 기능을 적절히 조절하여 더 나은 웹 경험을 만들어보세요!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
preventDefault의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!

추가 문제 1. 링크 클릭 시 페이지 이동을 막고 메시지를 표시해보세요.

// 답:
let myLink = document.getElementById("myLink");
myLink.addEventListener("click", function(event) {
    event.preventDefault();
    alert("페이지 이동이 막혔습니다!");
    console.log("링크 클릭됨, 이동 안함");
});

추가 문제 2. 폼 제출 시 새로고침을 막고 입력값을 확인해보세요.

// 답:
let myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event) {
    event.preventDefault();

    let input = document.getElementById("textInput");
    console.log("입력된 값:", input.value);
    alert("입력값: " + input.value);
});

추가 문제 3. 우클릭 메뉴를 막고 경고 메시지를 표시해보세요.

// 답:
let protectedArea = document.getElementById("protectedArea");
protectedArea.addEventListener("contextmenu", function(event) {
    event.preventDefault();
    alert("이 영역에서는 우클릭이 금지되어 있습니다!");
    console.log("우클릭 메뉴 차단됨");
});

추가 문제 4. preventDefault를 사용하는 가장 일반적인 경우 3가지는 무엇인가요?

답: 1) 링크 클릭 시 페이지 이동 막기, 2) 폼 제출 시 새로고침 막기, 3) 우클릭 시 컨텍스트 메뉴 막기입니다.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

link.addEventListener("click", function() {
    preventDefault();
    console.log("링크 클릭됨");
});

답: 이벤트 객체를 매개변수로 받지 않았습니다. 올바른 코드:

link.addEventListener("click", function(event) {
    event.preventDefault();
    console.log("링크 클릭됨");
});

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.

1단계 과정: 링크 찾기 → 클릭 이벤트 등록 → preventDefault로 이동 막기 → 원하는 동작 실행

2단계 과정: 폼 찾기 → submit 이벤트 등록 → preventDefault로 새로고침 막기 → alert로 결과 표시

3단계 과정: 영역 찾기 → contextmenu 이벤트 등록 → preventDefault로 메뉴 막기 → 색상 변경

📂 마무리 정보

오늘 배운 12.2.2 내용이 여러분의 자바스크립트 지식 창고에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'12. 클릭하고 반응하기 (이벤트 처리) > 12.2 이벤트 객체 활용하기' 카테고리의 다른 글

12.2.1 이벤트 정보 확인하기 - 조용한 정보 수집가가 되어보기 (0)	2025.07.16

현재글12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

싱글턴패턴, 중등코딩교육, 논리연산자, Promise, 비동기, 코딩교재, ES6모듈, 모듈패턴, 자바스크립트교재, JavaScript, async_await, setTimeout, Import, 비교연산자, 연산자, 모듈, Export, 산술연산자, 자바스크립트, 초등코딩,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

초중고등학생 자바스크립트 교재

12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

📘 12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

🧠 새로운 단어들과 친해지기

✨ `preventDefault`의 핵심 개념

일상 속 비유: 조용한 시간 조절 이야기

🎯 `preventDefault`를 사용하는 이유

⚙️ 기본 사용법 배우기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 링크 클릭해도 페이지 이동 말고 "이동 막았어요!"라는 메시지를 띄워보자

🔹 두 번째 예시: 폼 제출해도 새로고침되지 않고, 이름을 받아서 "안녕~ ○○!"이라고 말해보자

🔹 세 번째 예시: 우클릭을 막고 "이건 보호된 공간이에요!"라는 메시지를 보여주자

🔄 `preventDefault` 사용 순서 정리하기

🧚‍♀️ 이야기로 다시 배우기: 조용한 도서관의 시간 조절 이야기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 이벤트 객체 없이 preventDefault 호출하기

❌ 실수 2: preventDefault 호출을 깜빡하고 기본 동작이 계속 일어남

❌ 실수 3: 모든 곳에 무분별하게 preventDefault 사용하기

✏️ 연습문제로 개념 다지기

Ex1) 링크 클릭하면 페이지 이동 말고 "이동 막았어요!"라는 메시지를 띄워보자

Ex2) 폼 제출해도 새로고침되지 않고, 이름을 받아서 "안녕~ ○○!"이라고 말해보자

Ex3) 우클릭을 막고 "이건 보호된 공간이에요!"라는 메시지를 보여주자

📚 11단원 복습문제 - DOM 조작 기억하기

복습문제 1: preventDefault와 DOM 조작을 함께 사용하기

🤔 심화 문제로 실력 확인하기

Q1. `preventDefault`를 사용하는 가장 중요한 이유 세 가지를 말해보세요.

Q2. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. 링크 클릭 시 페이지 이동을 막고 메시지를 표시해보세요.

추가 문제 2. 폼 제출 시 새로고침을 막고 입력값을 확인해보세요.

추가 문제 3. 우클릭 메뉴를 막고 경고 메시지를 표시해보세요.

추가 문제 4. preventDefault를 사용하는 가장 일반적인 경우 3가지는 무엇인가요?

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

🔄 단계별 진행 과정 정리

📂 마무리 정보

'12. 클릭하고 반응하기 (이벤트 처리) > 12.2 이벤트 객체 활용하기' 카테고리의 다른 글

'12. 클릭하고 반응하기 (이벤트 처리)/12.2 이벤트 객체 활용하기'의 다른글

티스토리툴바

12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

📘 12.2.2 기본 동작 막기 (preventDefault) - 브라우저의 자동 기능을 조용히 조절하는 섬세한 방법

🧠 새로운 단어들과 친해지기

✨ preventDefault의 핵심 개념

일상 속 비유: 조용한 시간 조절 이야기

🎯 preventDefault를 사용하는 이유

⚙️ 기본 사용법 배우기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 링크 클릭해도 페이지 이동 말고 "이동 막았어요!"라는 메시지를 띄워보자

🔹 두 번째 예시: 폼 제출해도 새로고침되지 않고, 이름을 받아서 "안녕~ ○○!"이라고 말해보자

🔹 세 번째 예시: 우클릭을 막고 "이건 보호된 공간이에요!"라는 메시지를 보여주자

🔄 preventDefault 사용 순서 정리하기

🧚‍♀️ 이야기로 다시 배우기: 조용한 도서관의 시간 조절 이야기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 이벤트 객체 없이 preventDefault 호출하기

❌ 실수 2: preventDefault 호출을 깜빡하고 기본 동작이 계속 일어남

❌ 실수 3: 모든 곳에 무분별하게 preventDefault 사용하기

✏️ 연습문제로 개념 다지기

Ex1) 링크 클릭하면 페이지 이동 말고 "이동 막았어요!"라는 메시지를 띄워보자

Ex2) 폼 제출해도 새로고침되지 않고, 이름을 받아서 "안녕~ ○○!"이라고 말해보자

Ex3) 우클릭을 막고 "이건 보호된 공간이에요!"라는 메시지를 보여주자

📚 11단원 복습문제 - DOM 조작 기억하기

복습문제 1: preventDefault와 DOM 조작을 함께 사용하기

🤔 심화 문제로 실력 확인하기

Q1. preventDefault를 사용하는 가장 중요한 이유 세 가지를 말해보세요.

Q2. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. 링크 클릭 시 페이지 이동을 막고 메시지를 표시해보세요.

추가 문제 2. 폼 제출 시 새로고침을 막고 입력값을 확인해보세요.

추가 문제 3. 우클릭 메뉴를 막고 경고 메시지를 표시해보세요.

추가 문제 4. preventDefault를 사용하는 가장 일반적인 경우 3가지는 무엇인가요?

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

🔄 단계별 진행 과정 정리

📂 마무리 정보

'12. 클릭하고 반응하기 (이벤트 처리) > 12.2 이벤트 객체 활용하기' 카테고리의 다른 글

'12. 클릭하고 반응하기 (이벤트 처리)/12.2 이벤트 객체 활용하기'의 다른글

관련글

티스토리툴바

✨ `preventDefault`의 핵심 개념

🎯 `preventDefault`를 사용하는 이유

🔄 `preventDefault` 사용 순서 정리하기

Q1. `preventDefault`를 사용하는 가장 중요한 이유 세 가지를 말해보세요.