브라우저에는 다양한 이벤트에 대한 기본 상호 작용 및 동작이 있습니다.
예를 들어 사용자가 양식에서 "제출" 버튼을 클릭하면 기본적으로 양식이 URL로 제출됩니다.
요소의 자식을 클릭하면 해당 요소가 기본 컨테이너이기 때문에 해당 요소에서도 클릭 이벤트가 발생합니다.
경우에 따라 이러한 기본값을 재정의할 수 있습니다. 이 기사에서는 event.preventDefault() 및 event.stopPropagation() 메소드 및 브라우저에서 발생하는 일부 기본 작업을 취소하는 데 사용하는 방법.
event.preventDefault()
이 방법은 이벤트가 트리거될 때 브라우저가 수행하는 기본 동작을 방지합니다.
다음은 웹페이지의 기본 작업과 이를 event.preventDefault()로 재정의하는 방법의 몇 가지 예입니다. .
기본 양식 제출을 재정의하는 방법
사용자가 양식을 제출하면(제출 버튼 클릭) 양식의 기본 동작은 양식의 데이터를 데이터를 처리하는 URL에 제출하는 것입니다.
양식 요소에는 action가 있습니다. 및 method 양식을 제출할 URL과 요청 유형을 지정하는 속성(get , post 등), 각각.
이러한 속성이 제공되지 않으면 기본 URL은 양식이 제출된 현재 URL이고 메서드는 get입니다. .
예를 들어, 이 코드:
<form>
<input name="email" />
<input name="password" />
<input type="submit" />
</form>
이 페이지를 생성합니다:
"dillion" 및 "password"를 입력하여 양식을 제출하면 get을 볼 수 있습니다. 127.0.0.1:5500/index.html에 제출된 요청 이렇게:
이 작업은 브라우저가 기본적으로 양식을 처리하는 방법입니다.
그러나 요청을 보내기 전에 데이터에 더 많은 작업을 수행할 수 있습니다. 이것은 오늘날의 양식 처리 방식에서 특히 일반적입니다.
요청을 URL로 보내기 전에 데이터 유효성 검사, 데이터 검사, 처리, 헤더 구성 등을 수행할 수 있습니다.
이러한 시나리오에서는 양식의 기본 작업을 방지할 수 있습니다. 방법은 다음과 같습니다.
<form id='form'>
...
</form>
const form = document.getElementById('form')
form.addEventListener('submit', (event) => {
event.preventDefault()
// process data and submit a request manually
})
이렇게 하면 양식을 제출할 수 있습니다.
링크를 클릭할 때 기본 동작을 재정의하는 방법
링크(앵커 태그 a href 속성), 기본 동작은 브라우저에서 클릭한 링크로 이동하는 것입니다.
해당 작업을 가로채서 탐색 전에 뭔가를 하고 싶다면 어떻게 하시겠습니까? 예를 들어, 사용자가 탐색하려는 페이지에 대한 액세스 권한이 있는지 확인합니다. 방법은 다음과 같습니다.
<a id="link" href="https://google.com">Google</a>
const link = document.getElementById("link")
link.addEventListener("click", event => {
event.preventDefault()
// do something and navigate
})
당신은 그것을 테스트 할 수 있습니다. "Google" 링크를 클릭하면 기본 탐색 작업을 차단했기 때문에 탐색이 수행되지 않습니다. 이제 탐색을 직접 처리해야 합니다.
event.stopPropagation()
전파는 무언가, 이 경우 이벤트를 전파하는 행위입니다. stopPropagation 메소드는 요소에서 이벤트가 트리거될 때 이벤트의 확산을 방지하는 데 사용됩니다.
JavaScript에서 요소에 대한 이벤트를 트리거하면 해당 요소의 부모와 조상에게 트리를 버블링합니다. 기본적으로 이벤트가 있는 요소는 부모의 컨테이너 "내부"에 있으므로 부모도 이벤트를 받습니다.
이것을 더 잘 설명하기 위해 예를 사용하겠습니다.
요소의 자식 클릭
다음 요소가 있다고 가정해 보겠습니다.
<div>
<button>Click me</button>
</div>
button을 클릭하면 , div도 클릭합니다. 버튼이 컨테이너에 있기 때문입니다. 이 논리는 클릭 이벤트가 버튼에서 컨테이너로 전파되고 이벤트가 루트에 도달할 때까지 모든 조부모에게 계속 퍼진다는 것을 의미합니다.
이를 확인하기 위해 다음 코드에서 이것이 어떻게 작동하는지 설명하겠습니다.
<div id="div">
<button id="button">Click me</button>
</div>
const div = document.getElementById('div')
const button = document.getElementById('button')
button.addEventListener('click', () => {
console.log('button clicked')
})
div.addEventListener('click', () => {
console.log('div container clicked')
})
브라우저에서 실행하려고 하고 버튼을 클릭하면 다음과 같은 결과가 나타납니다.
div 컨테이너도 클릭 이벤트를 수신하므로 클릭 콜백 함수도 호출됩니다.
이벤트 전파는 이벤트 및 요소의 기본 동작이지만 경우에 따라 일부 동작을 원하지 않을 수 있습니다. 많은 예 중에서 여기 하나가 있습니다.
다음은 Gmail 새 메시지 팝업입니다.
상단에는 3개의 작업 버튼이 있습니다. 하나는 팝업을 최소화하고, 하나는 팝업을 전체 화면으로 만들고, 하나는 팝업을 닫습니다.
그러나 "새 메시지" 텍스트가 있는 상단 표시줄에도 클릭 핸들러가 있어 클릭 시 팝업이 최소화됩니다.
여기서 피하고 싶은 한 가지는 버튼을 클릭할 때 클릭 이벤트가 상단 표시줄로 전파되고 해당 이벤트에 대한 기능도 실행되는 것을 원하지 않는다는 것입니다. 내 말은, 예를 들어 닫기 버튼을 클릭할 때 상단 표시줄도 최소화되는 것을 원하지 않는다는 것입니다.
이와 같은 경우에는 전파를 중지하고 싶습니다.
팝업이 다음과 같이 구성되었다고 가정해 보겠습니다.
<div id='top-bar'>
<!-- The Message Element -->
<!-- The Buttons -->
</div>
const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')
topBar.addEventListener('click', () => {
// minimize or maximize popup
})
closeButton.addEventListener('click', () => {
// close popup
})
stopPropagation도 추가하고 싶을 것입니다. 이벤트가 상단 표시줄로 퍼지는 것을 방지하기 위해 버튼의 리스너에 메소드를 추가합니다. 이렇게 하려면 버튼의 리스너를 다음과 같이 업데이트합니다.
closeButton.addEventListener('click', (event) => {
event.stopPropagation()
// close popup
})
이렇게 하면 상단 표시줄이 직접 클릭될 때만 클릭 이벤트가 수신됩니다.
마무리
event.preventDefault()의 차이점 및 event.stopPropagation() 전자는 브라우저가 수행하는 기본 동작을 방지하고 후자는 이벤트의 기본 동작(트리 위로 전파)을 방지합니다.
이러한 기본 동작과 동작은 실수가 아니며 코딩하는 동안 걱정할 필요가 없습니다. 그러나 이 문서의 예에서 보았듯이 재정의하려는 시나리오가 있습니다.