event.preventDefault() 및 event.stopPropagation()을 사용하여 브라우저 기본값을 관리하는 방법

event.preventDefault() 및 event.stopPropagation()을 사용하여 브라우저 기본값을 관리하는 방법

 

브라우저에는 다양한 이벤트에 대한 기본 상호 작용 및 동작이 있습니다.

예를 들어 사용자가 양식에서 "제출" 버튼을 클릭하면 기본적으로 양식이 URL로 제출됩니다.

요소의 자식을 클릭하면 해당 요소가 기본 컨테이너이기 때문에 해당 요소에서도 클릭 이벤트가 발생합니다.

경우에 따라 이러한 기본값을 재정의할 수 있습니다. 이 기사에서 우리는 무엇을 배울 것입니다 event.preventDefault() 그리고 event.stopPropagation() 메서드는 브라우저에서 발생하는 일부 기본 작업을 취소하는 데 사용하는 방법입니다.

event.preventDefault()

이 메서드는 이벤트가 트리거될 때 브라우저가 수행하는 기본 작업을 방지합니다.

다음은 웹페이지의 기본 작업과 이를 재정의하는 방법의 몇 가지 예입니다. event.preventDefault().

기본 양식 제출을 재정의하는 방법

사용자가 양식을 제출하면(제출 버튼 클릭) 양식의 기본 동작은 양식의 데이터를 데이터를 처리하는 URL에 제출하는 것입니다.

양식 요소에는 action 그리고 method 양식을 제출할 URL과 요청 유형을 지정하는 속성(get, post등), 각각.

이러한 속성이 제공되지 않으면 기본 URL은 양식이 제출된 현재 URL이고 메서드는 get.

예를 들어 이 코드는 다음과 같습니다.

이 페이지를 생성합니다:

"dillion"과 "password"를 입력하여 양식을 제출하면 다음을 볼 수 있습니다. get 에 제출된 요청 127.0.0.1:5500/index.html 이와 같이:

이 작업은 브라우저가 기본적으로 양식을 처리하는 방법입니다.

그러나 요청을 보내기 전에 데이터에 더 많은 작업을 수행할 수 있습니다. 이것은 오늘날의 양식 처리 방식에서 특히 일반적입니다.

요청을 URL로 보내기 전에 일부 데이터 유효성 검사, 데이터 검사, 처리, 헤더 구성 등을 수행할 수 있습니다.

이러한 시나리오에서는 양식의 기본 작업을 방지할 수 있습니다. 방법은 다음과 같습니다.

...

const form = document.getElementById('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()
  
  // process data and submit a request manually
})

이렇게 하면 양식을 제출할 수 있습니다.

링크를 클릭할 때 기본 동작을 재정의하는 방법

링크(앵커 태그)를 클릭하면 a 와 href 속성), 기본 동작은 브라우저에서 클릭한 링크로 이동하는 것입니다.

해당 작업을 가로채서 탐색 전에 뭔가를 하고 싶다면 어떻게 하시겠습니까? 예를 들어, 사용자가 탐색하려는 페이지에 대한 액세스 권한이 있는지 확인합니다. 이렇게 하는 방법은 다음과 같습니다.

Google

const link = document.getElementById("link")

link.addEventListener("click", event => {
  event.preventDefault()

  // do something and navigate
})

당신은 그것을 테스트 할 수 있습니다. "Google" 링크를 클릭하면 기본 탐색 작업을 차단했기 때문에 탐색이 수행되지 않습니다. 이제 탐색을 직접 처리해야 합니다.

event.stopPropagation()

전파는 무언가, 이 경우 이벤트를 전파하는 행위입니다. 그만큼 stopPropagation 메소드는 요소에서 이벤트가 트리거될 때 이벤트의 확산을 방지하는 데 사용됩니다.

JavaScript에서 요소에 대한 이벤트를 트리거하면 해당 요소의 부모와 조상에게 트리를 버블링합니다. 기본적으로 이벤트가 있는 요소는 부모의 컨테이너 "내부"에 있으므로 부모도 이벤트를 받습니다.

이것을 더 잘 설명하기 위해 예를 사용하겠습니다.

요소의 자식 클릭

다음 요소가 있다고 가정해 보겠습니다.

를 클릭하면 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개의 작업 버튼이 있습니다. 하나는 팝업을 최소화하고, 하나는 팝업을 전체 화면으로 만들고, 하나는 팝업을 닫습니다.

그러나 "새 메시지" 텍스트가 있는 상단 표시줄에는 클릭 핸들러도 있으므로 클릭 시 팝업이 최소화됩니다.

여기서 피하고 싶은 한 가지는 버튼을 클릭할 때 클릭 이벤트가 상단 표시줄로 전파되고 해당 이벤트에 대한 기능도 실행되는 것을 원하지 않는다는 것입니다. 내 말은, 예를 들어 닫기 버튼을 클릭할 때 상단 표시줄도 최소화되는 것을 원하지 않는다는 것입니다.

이와 같은 경우 전파를 중지하려고 합니다.

팝업이 다음과 같이 만들어졌다고 가정해 보겠습니다.

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() 전자는 브라우저가 수행하는 기본 동작을 방지하고 후자는 이벤트의 기본 동작을 방지하여 트리 위로 전파됩니다.

이러한 기본 동작과 동작은 실수가 아니며 코딩하는 동안 걱정할 필요가 없습니다. 그러나 이 문서의 예에서 보았듯이 재정의하려는 시나리오가 있습니다.