디스패치
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