[JS] 이벤트

# 웹에서의 이벤트란?

무언가 일어났다는 신호, 사건

• 버튼을 클릭했을 때 팝업 창이 출력되는 것
• 마우스 커서에 위치에 따라 드래그하는 것

웹은 이벤트를 통해 특정 동작을 수행

모든 DOM 요소는 이벤트를 만들어 냄

 

event object

DOM에서 이벤트가 발생했을 때 생성되는 객체
종류 매우 많음 → mdn 찾아서 쓰기

https://developer.mozilla.org/ko/docs/Web/API/Event

DOM요소는 event를 받고, event handler를 이용해서 event를 처리한다.

---

# event handler

이벤트가 발생했을 때 실행되는 함수

 

 

.addEventListenr() :대표적인 이벤트 핸들러

EventTartget.addEventListener(type, handler)

• 특정 이벤트를 DOM 요소가 수신할 때마다 콜백 함수를 호출
  
  • type: 수신할 이벤트 이름, 문자열로 작성
  • handler: 콜백 함수, Event object를 유일한 매개변수로 받음, 반환은 없음
• 써보기

// 버튼 선택
const btn = document.querySelector('#btn')

// 버튼에 이벤트 핸들러 부착
btn.addEventListener('click',function (event) {
  console.log(event)			// PointerEvent
  console.log(event.target)		// 버튼
  console.log(event.currentTarget)	// 버튼
  console.log(this)		// 버튼
})

• 이벤트 핸들러에서 this는 강제로 부착된 대상을 가르키도록 설정되어있다, 단 화살표 함수면 안 됨

const clickCallbackFun = function(event) {
  console.log(event)
  console.log(event.target)
  console.log(event.currentTarget)
  console.log(this)
}
btn.addEventListener('click', clickCallbackFun)

• 콜백 함수를 따로 작성해도 된다 → 유지보수에 좋음 

 

 

---

다음과 같은 p ⊂ div ⊂ form의 구조를 가진 요소가 있을 때,

각각의 요소를 클릭하면 어떤 요소를 클릭했는지

알려주는 핸들러를 붙여주고

p 태그를 선택했을 때, 결과가 어떻게 나올까?

const formElement = document.querySelector('#form')
const divElement = document.querySelector('#div')
const pElement = document.querySelector('#p')

const clickHandler1 = function (event) {
  console.log('form이 클릭되었습니다.')
}
const clickHandler2 = function (event) {
  console.log('div가 클릭되었습니다.')
}
const clickHandler3 = function (event) {
  console.log('p가 클릭되었습니다.')
}

formElement.addEventListener('click', clickHandler1)
divElement.addEventListener('click', clickHandler2)
pElement.addEventListener('click', clickHandler3)

다음과 같이 가장 안쪽에 있는 p만 클릭했을 때도

상위 요소들도 같이 동작하는 것을 확인할 수 있다.

이러한 현상을 버블링이라고 한다.

 

# 버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작하는 현상
가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함

 

이벤트가 정확히 어디서 발생하는지 알 수 있는 방법?

const outerOuterElement = document.querySelector('#outerouter')

const clickHandler = function (event) {
  console.log('currentTarget:', event.currentTarget.id)
  console.log('target:', event.target.id)
}

outerOuterElement.addEventListener('click', clickHandler)

콘솔: 위에서 부터 inner, outer, outerouter 클릭 했을 때

즉, currentTarget은 핸들러가 부착된 위치, Target은 누른 위치

 

target

• 이벤트가 발생한 가장 안쪽의 요소
• 실제 이벤트가 시작된 target 요소
• 버블링이 진행되어도 변하지 않음

 

currentTarget

• 현재 요소
• 항상 이벤트 핸들러가 연결된 요소만을 참조하는 속성
• this와 같다
• 확인하기 쉽지않음, 이벤트때만 잠깐 나오는거라 console.log로 찍어서 확인해야 함

 

---

여러가지 event handler 활동예시들

(추가하기)