Events(10)

김승주·2023년 5월 12일
0

JS/Events

목록 보기
10/10

Events(10)

커스텀 이벤트

    1. 커스텀 이벤트와 디스패치

디스패치

const child1 = document.querySelector('.child:nth-child(1)')
const child2 = document.querySelector('.child:nth-child(2)')
child1.addEventListener('click',event => {
  // 강제로 이벤트 발생!
  child2.dispatchEvent(new Event('click'))
  child2.dispatchEvent(new Event('wheel'))
  child2.dispatchEvent(new Event('keydown'))
})
child2.addEventListener('click', event => {
  console.log('child2 click!')
})
child2.addEventListener('wheel', event => {
  console.log('child2 wheel!')
})
child2.addEventListener('keydown', event => {
  console.log('child2 keydown!')
})
// child2 click!
// child2 wheel!
// child2 keydown!

커스텀 이벤트

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)
})
child2.addEventListener('click', () => {
  child1.dispatchEvent(new CustomEvent('hello-world', {
    detail: 123
  }))
})
// 커스텀 이벤트 발생
// 123

0개의 댓글