디스패치와 커스텀 이벤트
HTML 코드.
1. 디스패치
child1 요소를 클릭하면 child2번에 적용해 놓은 것들이 출력됨.
해당하는 요소의 이벤트 리스너를 통해 실제 해당 이벤트를 화면에서 click, wheel, keydown을 실행하지 않더라도... dispatchEvent라는 메소드를 통해서 강제로 실행할 수 있음. 이 메소드의 인수로는 'new'라는 키워드로 시작하는 이벤트의 생성자 함수로 해당 이벤트의 이름을 적어서 넣으면 됨.
2. 커스텀 이벤트
'hello world'라는 커스텀 이벤트는 js에 존재하지 않는 이벤트이므로 화면에서 어떠한 동작을 하더라도 아무런 반응이 없다.
dispatchEvent 메소드는 이벤트를 강제로 실행하는 역할을 해서 동작할 수 있게 된다. 그래서 child2 요소를 클릭할 시, 'hello world'라는 이벤트가 강제로 발생이 되면서 콘솔창에 결과가 출력될 것임. 
디테일 속성에는 내용이 존재하지 않으므로 undefined.
알아야 할 것은 js에 존재하지 않는 커스텀한 이벤트의 내용을 작성해서 dispatchEvent 메소드를 통해 강제로 실행할 수 있다는 것. 
이번에는 디테일도 추가해 보았음. 
그래도 undefined 출력. 
하지만 이렇게 생성자 함수로 호출하는 이벤트를 대문자 C로 시작하는 커스텀 이벤트라는 객체를 활용한다면, 
디테일 속성이 잘 출력되었다.
결론 : js에 존재하지 않는 커스텀한 이벤트를 만들어서 어떠한 데이터를 같이 전달하고 싶다면, 두 번째 인수로 객체 데이터를 추가해서 detail 속성에 js의 데이터를 넣어주면 됨. CustomEvent 클래스가 별도로 있으므로 이 클래스를 통해서 생성자 함수로 호출했을 경우에만 이벤트가 잘 실행된다. 디테일 속성 조회 가능!
雲外蒼天