e.preventDefault(); 02

Q1.

e.preventDefault(); 이 코드로 링크로의 이동 또는 form 태그의 submit 이벤트가 즉시 실행되는 것이 막힌다면, 해당 동작들은 언제 실행이 되는거야? 예를 들어서, a태그에 어떤 주소값이 href로 주어졌다면, 그 주소로의 이동은 언제 이루어지게 되는거지?

 

 

 

A1.

ChatGPT의 말:

e.preventDefault()는 브라우저의 기본 동작(예: 링크 클릭 시 페이지 이동, 폼 제출 시 새로고침)을 막는 데 사용됩니다. 즉, 기본 동작이 실행되지 않도록 브라우저에 지시하는 역할을 합니다.

기본 동작 실행 시점

브라우저는 다음과 같은 순서로 이벤트를 처리합니다:

1. 이벤트 트리거:
   • 사용자가 링크를 클릭하거나 폼을 제출했을 때 이벤트가 발생합니다.
2. 이벤트 리스너 실행:
   • 해당 이벤트에 연결된 addEventListener 또는 onClick 같은 핸들러가 호출됩니다.
   • 이 단계에서 이벤트 리스너 안에서 e.preventDefault()가 호출되면 브라우저의 기본 동작(예: 링크 이동 또는 폼 제출)이 취소됩니다.
3. 기본 동작 실행:
   • 만약 이벤트 핸들러가 e.preventDefault()를 호출하지 않았다면, 브라우저는 기본 동작을 수행합니다.
     • 예를 들어, 링크의 href 값으로 이동하거나, 폼 데이터를 서버로 제출하는 등의 작업이 이루어집니다.

---

그렇다면 기본 동작은 언제 실행되는가?

기본 동작은 이벤트 핸들러의 실행이 완료된 후 브라우저에 의해 자동으로 실행됩니다. 하지만 e.preventDefault()가 호출되었다면, 브라우저는 기본 동작을 실행하지 않습니다.

---

a 태그의 경우

예를 들어, 아래 코드처럼 e.preventDefault()를 사용한 경우:

 

1. 사용자가 링크를 클릭하면 click 이벤트가 발생합니다.
2. 이벤트 리스너가 실행되고, e.preventDefault()가 호출됩니다.
3. 브라우저는 기본 동작인 href로의 페이지 이동을 취소합니다.

---

그렇다면 언제 기본 동작이 실행될 수 있을까?

1. e.preventDefault()를 호출하지 않는 경우:
   • 이벤트 리스너가 호출된 이후, 브라우저가 기본 동작을 실행합니다.
2. e.preventDefault() 호출을 조건부로 사용하는 경우:
   • 특정 조건에서만 기본 동작을 막고, 그렇지 않은 경우 기본 동작이 실행되도록 할 수 있습니다.

document.querySelector('a').addEventListener('click', function(e) {
    if (someCondition) {
        e.preventDefault(); // 조건에 따라 기본 동작을 막음
        console.log('링크 이동이 방지되었습니다.');
    }
    // 조건이 만족되지 않으면 기본 동작 실행
});

 

 

 

---

정리

• 기본 동작은 이벤트 핸들러의 실행이 끝난 후에 브라우저가 처리합니다.
• e.preventDefault()를 호출하면 기본 동작이 취소됩니다.
• 따라서, 링크 이동이나 폼 제출이 실행되려면 e.preventDefault()가 호출되지 않아야 하며, 이벤트 핸들러가 실행된 이후에 브라우저가 기본 동작을 수행합니다.

 

 

 

Q2.

나의 말:

즉, e.preventDefault() 라고 코드 최상단에서 작성해버리면, 추가적인 코드로 해당 이벤트에 대한 코드를 작성해주지 않는 한, 해당 JS코드를 쓰는 HTML 페이지에선, 무슨 짓을 하더라도 링크로의 이동, form 태그의 submit 제출 등의 이벤트는 절대 실행되지 않는것이지?

 

 

 

A2.

ChatGPT의 말:

 

정확히 맞습니다! 😊

e.preventDefault()가 호출되면 해당 이벤트의 기본 동작은 완전히 차단됩니다. 따라서, 추가적인 코드로 명시적으로 동작을 재정의하지 않는 한, 링크 이동이나 폼 제출과 같은 기본 동작은 절대 실행되지 않습니다.

---

예를 들어:

1. 링크 이동의 경우:

HTML:

html
코드 복사
<a href="https://example.com" id="myLink">Go to Example</a>

 

JavaScript:

document.querySelector('#myLink').addEventListener('click', function(e) {
    e.preventDefault(); // 기본 동작인 페이지 이동 차단
    console.log('링크 이동 차단됨');
});

이 경우, 사용자가 링크를 클릭해도 https://example.com으로의 이동은 절대 이루어지지 않습니다.

브라우저는 이동을 시도조차 하지 않습니다.

2. 폼 제출의 경우:

HTML:

<form id="myForm">
    <input type="text" name="name" value="John Doe">
    <button type="submit">Submit</button>
</form>

 

JavaScript:

document.querySelector('#myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 폼 제출 차단
    console.log('폼 제출 차단됨');
});

이 경우, 폼을 제출하려고 해도 브라우저는 폼 데이터를 서버로 전송하지 않습니다.

폼 제출 동작이 완전히 차단됩니다.

---

**"무슨 짓을 하더라도"**란 부분의 확인

e.preventDefault()로 차단된 이벤트는 브라우저의 기본 동작으로 실행되지 않습니다. 이벤트를 다시 실행하려면 명시적으로 이벤트 동작을 구현해야 합니다.

링크 이동 예:

만약 기본 동작을 막은 뒤, 스크립트로 링크 이동을 구현하고 싶다면 아래처럼 명시적으로 구현해야 합니다:

document.querySelector('#myLink').addEventListener('click', function(e) {
    e.preventDefault(); // 기본 동작 차단
    console.log('링크 이동 차단됨');

    // 명시적으로 이동 구현
    window.location.href = 'https://example.com';
});

폼 제출 예:

폼 데이터를 수동으로 전송하려면:

document.querySelector('#myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 기본 동작 차단
    console.log('폼 제출 차단됨');

    // 명시적으로 데이터를 전송
    const formData = new FormData(document.querySelector('#myForm'));
    fetch('/submit', {
        method: 'POST',
        body: formData
    }).then(response => console.log('폼 제출 완료:', response));
});

 

---

결론

• e.preventDefault()를 호출하면, 해당 이벤트의 기본 동작은 무조건 실행되지 않습니다.
• 추가로 동작을 원한다면, 스크립트로 명시적으로 구현해야 합니다.
• 아무 추가 코드가 없다면, 기본 동작은 완전히 차단된 상태로 남습니다.