[js] dispatchEvent

이번 포스트에서는 javascript에서 프로그래밍적으로 event를 발생시키기 위해서 사용하는 dispatchEvent에 대해서 살펴보자.

 

dispatchEvent

 

초기 화면

다음과 같은 구구단 계산기를 만들어보자.

<select id="num1"></select>
  *
<select id="num2"></select>
= 
<input type="number" id="result" />

이 두 개의 select에는 change event를 등록하여 select 값이 변경되면 result에 구구단 결과를 입력한다.

let selects = document.querySelectorAll("select");
    selects.forEach((element) => {
      for (let i = 1; i < 10; i++) {
        element.innerHTML += `<option value='${i}''>${i}`;
      }

      element.addEventListener("change", (e) => {
        let num1 = document.querySelector("#num1").value;
        let num2 = document.querySelector("#num2").value;
        document.querySelector("#result").value = num1 * num2;
    });
});

 

이벤트 강제 발생

그런데 매번 select를 조작하기가 귀찮아져서 input에 값 두 개를 넣으면 각각의 select에 값을 전달하고 기존의 이벤트 체계를 통해서 계산하려고 한다.

<div>빠른 입력: <input type="text" name="quick" id="quick" /></div>

이 경우 입력 값을 분석해서 select에 전달하는 것은 어렵지 않은데 아쉽게도 값이 변경되더라도 change 이벤트가 발생하지는 않는다. 이런 상황에서 programming 적으로 event를 발생시켜줘야 하는데 이때 사용하는 함수가 dispatchEvent(event)이다.

quick.addEventListener("change", (e) => {
    let nums = e.target.value.split(" ");
    
    num1.value = nums[0]; // 값은 바꿀 수 있지만 change 이벤트가 발생하지 않음
    num2.value = nums[1];

    num1.dispatchEvent(new Event("change")); // num1 요소에 직접 change event 발생
});