자바스크립트 이벤트 연속으로 발생시키기 | dispatchEvent

let event = new Event('change') // change, click etc.
dispatchEvent(event)

카테고리에서 1분류를 선택하면 자동으로 1분류에 해당하는 2분류의 option이 2분류의 selectbox에 셋팅 되어야한다. 그래서 각각의 selectbox에는 change 이벤트가 등록되어있다. 

 

그러나 change이벤트는 사용자가 직접 변경을 했을 때 일어난다. 따라서 자동으로 값을 1분류에 셋팅만 해주는 것은 이벤트가 연속적으로 일어나지 않는다. 이 때 사용 할 수 있는 것이 dispatchEvent 이다.

 

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/dispatchEvent

EventTarget.dispatchEvent() - Web API | MDN

사용법|

let event = new Event('change') // change, click etc.
target.dispatchEvent(event)

내 코드 |

//dispatchEvent 예시
if(category!=="0" && category!==null) {
    let categoryList = category.split('-');
    firstLevel.value = categoryList[0];
    let changeEvent = new Event('change'); //change 이벤트 생성
    firstLevel.dispatchEvent(changeEvent); //firstLevel에 등록 된 change 이벤트를 발생시킨다.
} else {
    firstLevel.value = '';
}

//내가 등록한 event
firstLevel.addEventListener('change', () => { //firstLevel의 값이 변경 될 때
    if (firstLevel.value === '') {
        category.get("2").forEach(category => { //secondLevel의 option을 새로 그린다.
            secondLevel.append(createCategoryOption(category));
        });
        secondLevel.value ='';
    } else {
        secondLevel.innerHTML =  '<option value="">전체</option>';
        getCategoryList("2",firstLevel.value).forEach(category => {
            secondLevel.append(createCategoryOption(category));
        });
    }
})