Events

1. 이벤트 추가 및 제거

    1. .addEventListener()

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

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

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

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

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

const handler = () => {
  console.log('Parent!')               // Parent!
}

parentEl.addEventListener('click',handler)
childEl.addEventListener('click', () => {
  parentEl.removeEventListener('click',handler)
})                                     // Child 영역을 클릭해도 Parent!가 안 나옴

0개의 댓글