[JavaScript] 자바스크립트 이벤트 작동 설정하기

125_자바스크립트 이벤트 작동 설정하기

[적용]

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

---

[문법]

메소드	의미	반환
이벤트타겟.dispatchEnvent(이벤트)	이벤트 발생 처리	진리값
new Event('이벤트', [{detail: 데이터)*])	이벤트 생성 처리	이벤트

* 생략 가능

---

[내용]

dispatchEvent()는 이벤트 타깃에 임의의 이벤트를 발생시킨다.

이벤트의 생성은 'new Event('이벤트')를 사용한다. 

프로그램 시작 1초 후 #myBox 요소 클릭 이벤트를 실행하는 샘플을 확인해 보자

 

HTML                                                                                                                                                              index.html

<div id="myBox">박스</div>

JavaScript                                                                                                                                                          main.js

const boxElement = document.querySelector('#myBox');

boxElement.addEventListener('click', () => {
  boxElement.innerHTML = '클릭 이벤트가 발생하였습니다.';
});

setTimer(() => {
  boxElement.dispatchEvent(new Event('click'));
}, 1000);

 

실행결과

버튼 클릭과 상관없이 1초 후 클릭 이벤트가 발생한다.

---

[Appendix]

click()을 사용해 클릭 이벤트를 발생시키는 방법

HTML 요소에 click()을 이용하여 클릭 이벤트를 발생시킬 수 있는데,

다음과 같이 본문 샘플 코드를 바꿔서 사용할 수 있다.

...생략

setTimeout(() = {
  boxElement.click();
}, 10000);

클릭 이외의 다른 이벤트를 이와 같이 응용하는 것은 불가능하다.

예를 들어, 마우스 움직임 관련 이벤트를 사용하고자 HTML 요소.mousemove()를 사용해도 작동되지 않는다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김