CH10. Events

zw0n2·2024년 3월 19일

Event Handler Listener 디스패치 마우스 버블링 이벤트위임 캡처링 커스텀이벤트 키보드 포인터 포커스 폼 핸들러

JavaScript 스터디

목록 보기

11/12

🍥이벤트 추가 및 제거

*index.html(아래 예제 참조용)

<body>
  <div class = 'parent'>
    <div class='child'>
      <a href="주소" target="_blank">
        HEROPY!
      </a>
	</div>
  </div>
</body>

1. .addEventListner()

대상에 이벤트 청취(Listen)를 등록
대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출됨

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

parentEl.addEventListener('click', () => {
  console.log('Parent!')
})
childEl.addEventListener('click', () => {
  console.log('Child!')
})

실행결과:
해당부분 클릭시 콘솔에 출력
Parent!
Child!

2. .removeEventListener()

대상에 등록했던 이벤트 청취(Listen)를 제거
메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있음

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

const handler = () => {   //핸들러 함수를 만들어둠으로써 언제든 add/remove 이벤트리스너로 전달 가능 = 여러곳에서 같은 콜백함수로 사용됨
  console.log('Parent!')
}

parent.addEventListener('click', handler)  //클릭 이벤트 발생 시 핸들러 함수 실행
childEl.addEventListener('click', () => {
  parent.removeEventListener('click', handler)  //child 요소 클릭 시 parent에서 핸들러 제거-> parent요소에서 클릭이벤트 발생해도 핸들러 함수는 실행 안됨
})

🍥이벤트 객체

대상에서 발생한 이벤트 정보를 담고 있음
콜백 함수에서 사용할 수 있는 매개변수로 그 이벤트 객체가 전달됨

const parentEl = document.querySelector('.parent')

parentEl.addEventListener('click', event => {  //클릭시 클릭 정보가 이벤트라는 매개변수로 들어감
  console.log(event.target /*이벤트가 발생한 해당요소로 클릭 영역에 따라 다른 결과 출력*/, event.currentTarget/*이벤트가 등록된 요소로 항상 같은 결과 출력*/)
})
parentEl.addEventListener('wheel', event => {  //휠을 내릴 시 deltaY값이 양수
  console.log(event)
})

const inputEl = document.querySelector('input')
inputEl.addEventListener('keydown', event => {
  console.log(event.key)      //인풋창에 키보드로 누르는 키 콘솔로 출력됨
})

🍥기본 동작 방지

1. 마우스 휠의 스크롤 동작 방지

const parent = document.querySelector('.parent')
parentEl.addEventListener('wheel'. event => {
  event.parentDefault()  //휠이 콘솔에는 출력되지만 실제로 동작하진 않음
  console.log('Wheel!')
})

2. a태그에서 페이지 이동 방지

const anchor = document.querySelector('a')
anchorEl.addEventListener('click', event => {
  event.preventDefault()
  console.log('Click!')
})

🍥버블링과 캡처링

- 이벤트 버블링

후손 요소로부터 더 상위 요소로 이벤트가 전파 (발생한 이벤트가 가장 깊이 있는 요소에서 시작해 DOM 트리를 따라 부모 요소로 한 단계씩 올라가면서 전파되는 것)
여러 요소에 공통으로 적용되는 이벤트 핸들러를 상위 요소에 한 번만 설정하여 코드의 중복을 줄일 수 있음
이벤트 버블링 정지: 이벤트 버블링을 특정 부분에서 정지 시켜주는 것
event.stopPropagation() 메서드 사용
정지 부분의 위를 클릭하면 그대로 버블링 동작함
예제

window.addEventListener('click', event => {
  console.log('Window')
})

document.body.addEventListener('click', event => {
  console.log('Body')
})

parentEl.addEventListener('click', event => {
  console.log('Parent')    //해당 부분 클릭시 이 부분부터 버블링 됨
})

childEl.addEventListener('click', event => {
  console.log('Child')   
  event.stopPropagation()   //버블링 정지
})

amchorEl.addEventListener('click', event => {
  console.log('Anchor')
})

실행결과:
(a 태그 부분 클릭)
Anchor
Child

- 이벤트 캡처링

이벤트 버블링과 반대 방향으로 이벤트가 처리 (이벤트 캡처링에서는 이벤트가 최상위 요소에서 시작하여, DOM 트리를 따라 아래로 내려가면서 대상 요소로 전달)
이벤트가 발생한 대상 요소에 도달하기 전에 상위 요소에서 이벤트를 먼저 감지하고자 할 때 유용
capture: true 사용
예제

window.addEventListener('click', event => {
  console.log('Window')
})

document.body.addEventListener('click', event => {
  console.log('Body')
}, {capture: true})   //이 부분 먼저 실행

parentEl.addEventListener('click', event => {
  console.log('Parent')
})

childEl.addEventListener('click', event => {
  console.log('Child')    //body부분 실행 후 이 부분부터 다시 버블링
})

amchorEl.addEventListener('click', event => {
  console.log('Anchor')
})

실행 결과:
(Child 부분 클릭)
Body
Child
Parent
Window

🍥이벤트 옵션

- 핸들러 한번만 실행

const parentEl = document.querySelector('.parent')

parentEl.addEventListener('click', event => {
  console.log('Parent')
}, {
  once: true   //콘솔에 한번만 출력됨
})

- 기본 동작과 핸들러 실행 분리

const parentEl = document.querySelector('.parent')

parentEl.addEventListener('wheel', () => {
  for (let i = 0; i < 10000; i +={
    console.log(i)
  }
}, {
  passive: true  //스크롤이 부드럽게 됨
})

-> 처리할 로직이 많아서 화면의 움직임이 느려질 때 사용

🍥이벤트 위임

: 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용할 수 있음

const parentEl = document.querySelector('.parent')
const childEls = document.querySelectorAll('.child')

//모든 대상 요소에 이벤트 등록
childEls.forEach(el => {
  el.addEventListener('click', event => {
    console.log(event.target.textContent)  //같은 로직을 child 개수만큼 반복(child 개수만클 핸들러 등록)
  })
})

//조상 요소에 이벤트 위임
parentEl.addEventListener('click', event => { //하나의 조상 요소에만 클릭 이벤트 추가(하나의 핸들러 부분만 등록)
  const childEl = event.target.closest('.child')  //대상요소를 포함한 가장 가까운 조상 요소 찾기
  if (childEl) {   //참인 경우 콘솔에 출력
    console.log(childEl.textContent)
  }
})

🍥마우스와 포인터 이벤트

click : 클릭 했을 때
dblclick : 더블 클릭했을 때
mousedown : 버튼을 누를 때
mouseenter : 포인터가 요소 위로 들어갈 때
mouseup : 버튼을 뗄 때
mouseleave : 마우스가 요소 밖으로 나올 때
mousemove : 포인터가 움직일 때
contextmenu : 우클릭 했을 때
wheel : 휠 버튼이 회전할 때

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

childEl.addEventListener('click', () => {
  childEl.classList.toggle('active')
})
childEl.addEventListener('mousedown', () => {
  childEl.classList.add('active')
})
childEl.addEventListener('mouseup', () => {
  childEl.classList.remove('active')
})
childEl.addEventListener('mousemove', event => {
  console.log(event)
})
childEl.addEventListener('contextmenu', event => {
  event.preventDefault()   //기본 동작 방지-> 우클릭의 메뉴들 보이지 않음
  console.log(event)
})
parentEl.addEventListener('wheel', event => {
  console.log(event)
})

🍥키보드 이벤트

keydown : 키를 누를 때
keyup : 키를 뗄 때

- 누른 키가 콘솔창에 출력

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown', event => {
  console.log(event.key)  
})

- 입력한 내용이 콘솔창에 출력

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown', event => {
  if (event.key === 'Enter') {
    console.log(event.target.value)   
  }
})

CJK문자: 중국어, 한국어, 일본어는 브라우저에서 처리하는 과정이 한단계 더 필요해서 두번 출력됨

- 입력을 완료하는 키(엔터, 탭 등)와 한글을 같이 사용할 경우

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown', event => {
  if (event.key === 'Enter' && !event.isComposing => {
    console.log(event.isComposing)
    console.log(event.target.value)   
  }
})

🍥양식(form)과 포커스 이벤트

focus : 요소가 포커스를 얻었을 때
blur : 요소가 포커스를 잃었을 때
input : 값이 변경되었을 때
change : 상태가 변경되었을 때
submit : 제출 버튼을 선택했을 때
reset : 리셋 버튼을 선택했을 때

🍥커스텀 이벤트

- 디스패치(강제로 이벤트 발생)

const child1 = document.querySelector('.child:nth-child(1)')
const child2 = document.querySelector('.child:nth-child(2)')

child addEventListener('click', event => {
  child2.dispatchEvent(new Event('click'))
  child2.dispatchEvent(new Event('wheel'))
})
child2.addEventListener('click', event => {
  conosole.log('Child2 click')
})
child2.addEventListener('wheel', event => {
  conosole.log('Child2 wheel')
})

- 커스텀 이벤트

const child1 = document.querySelector('.child:nth-child(1)')
const child2 = document.querySelector('.child:nth-child(2)')

child1.addEventListener('hello-world', event => {
  console.log('커스텀 이벤트 발생')
  console.log(event.detail)   //커스텀 이벤트라는 클래스를 생성자 함수로 호출 했을 때만 detail 속성으로 조회 가능
})

child2.addEventListener('click', () => {
  child1.dispatchEvent(new CustumEvent('hello-world'))
  detail: 123  //콘솔에 출력될 내용 전달
})

실행 결과:
child 2번의 요소를 클릭해도 child 1번에 적용된 이벤트의 콜백함수가 동작하여 콘솔에 출력

zw0n2

렛츠고 스터디 렛츠고 스터디 예 렛츠고 오오오 스터디 렛츠고 스터디 예