[책] 자바스크립트 코드 레시피 278 - 114일차

이벤트 작동 설정하기

• 비동기 처리 타이밍을 표시하고 싶을 때

구문

이벤트타깃.dispatchEvent(이벤트) 이벤트 발생 처리
new Event(이벤트, [{detail}]) 이벤트 생성 처리

설명

dispatchEvent() 는 이벤트 타깃에 임의의 이벤트를 발생시킵니다. 이벤트의 생성은 new Event('이벤트') 를 사용합니다. 프로그램 시작 1초 후 #myBox 요소 클릭 이벤트를 실행하는 샘플을 확인해봅니다.

실습

index.html

<div class="myBox"></div>

---

style.css

.myBox {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

---

script.js

// 1초 후 요소 클릭 이벤트 실행하는 코드
const boxElement = document.querySelector('.myBox');
boxElement.addEventListener('click', () => {
  boxElement.innerHTML = '클릭 이벤트가 발생하였습니다.';
});
setTimeout(() => {
  boxElement.dispatchEvent(new Event('click'))
}, 1000);