[JS] 이벤트

이벤트 추가

const el = document.querySelector('.child')

요소.addEventListener(이벤트, 콜백함수)

요소에 Listener(이벤트가 발생하는지 듣고 있는 사람)를 등록

el.addEventListener('click', () => {
  // 실행할 할 일
})

// 또는
el.addEventListener('click', 함수명)

요소.removeEventListener(이벤트, 함수)

요소에 Listener 를 제거

el.removeEventListener('click', 함수명)
// addEventListener에서 함수를 직접 작성했을 땐 제거가 불가

이벤트 객체

대상에서 발생한 이벤트 정보를 담고 있음

event.target
event.currentTarget  
event.key            // 입력한 키 

기본 동작 방지 event.preventDefault()

브라우저가 기본적으로 제공하는 동작을 제거

const fun = () => {
  event.preventDefault()
} 

// 페이지 이동 방지
aTagElement.addEventListener('click', fun)  

// 휠 스크롤 방지
scrollElement.addEventListener('wheel', fun)  

addEventListener()의 옵션

{once : true}

핸들러를 한번만 실행

Element.addEventListener('click', 함수, {once: true})  
// 여러번 클릭해도 한번만 실행됨

{paassive: true}

요소의 기본 동작과 핸들러 실행을 분리 -> 성능 개선

Element.addEventListener('click', 함수, {paassive: true})
//