이벤트 객체 모방하기 {target : e}

 

const checkboxes = document.querySelectorAll(".comp-inventory-product input[name=chk]:checked");
checkboxes.forEach(e => {
    const event = { target: e };
    changeCheckBoxCnt(event)
})

배열객체인 메소드 forEach()가 동작하면서 배열을 돌면서 콜백함수를 실행한다.

콜백함수안에는 개별 요소(element)인 e가 현재 들어있다. e를 찍어보면 다음과 같다.

<input name="chk" id="278224" type="checkbox">

forEach()안에서는 만약에 id값과 type의 값을 찾고싶으면 e.id와 e.type을 사용하면되지만 만약 외부함수에서 파라미터로 값이아니라 이벤트객체를 넘겨줘야하는 상황이라면 위와 같은 방법을 사용할 수 있다. 

 

참고로 넘겨주는 이벤트객체는 자바스크립트 객체일뿐이며 실제 브라우저에서 자동으로 생성되는 고유 이벤트객체는 아니고 핸들러함수가 기대하는 형식으로 이벤트를 시뮬레이션하는것이라고한다. 

진짜 이벤트객체를 생성하려면 아래 사이트를 참고한다.

https://developer.mozilla.org/ko/docs/Web/API/Event/Event

Event() - Web API | MDN