07-5 자바스크립트 문서 객체 이벤트 기본

이벤트 연결

addEventListener()

이벤트를 실행하는 메소드
문서객체.addEventListener(이벤트이름, 이벤트리스너(이벤트핸들러))
이벤트가 발생할 때 실행할 함수를 이벤트 리스너 또는 이벤트 핸들러라고 부름

이벤트 연결 제거

removeEventListener()

문서객체.removeEventListener(이벤트이름, 이벤트리스너)

---

let counter = 0
// 이벤트를 제거하려면 이벤트 리스너를 변수 또는 상수로 가지고 있어야 함
const listener = () => {
  header.innerText = `클릭 횟수 : ${++counter}`
}

const header = document.createElement('h1')
header.innerText = `클릭 횟수: 0` 

const p = document.createElement('p')
p.innerText = '이벤트 연결 상태: 해제'

const connectButton = document.createElement('button')
connectButton.innerText = `이벤트 연결` 
connectButton.addEventListener('click', () => {
  header.addEventListener('click', listener)
  p.innerText = '이벤트 연결 상태: 연결'
})

const disconnectButton = document.createElement('button')
disconnectButton.innerText = `이벤트 해제`
disconnectButton.addEventListener('click', () => {
  header.removeEventListener('click', listener)
  p.innerText = '이벤트 연결 상태: 해제'
})

// 화면 나타내는 순서대로 입력 
document.body.appendChild(header)
document.body.appendChild(connectButton)
document.body.appendChild(disconnectButton)
document.body.appendChild(p)

실행 결과