180. (javascript/자바스크립트) CustomEvent , dispatchEvent 사용해 커스텀 이벤트 리스너 생성 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

 

---

[소스 코드]

​

    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->    
    <script>


        // [커스텀 이벤트 리스너를 만들기 위해 전역 변수 선언]
        var myEvent = new CustomEvent("myEvent");



        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("[window onload] : [start]");
            console.log(""); 


            /*
            [요약 설명]
            1. CustomEvent : 사용자 정의 이벤트 리스너를 생성해줍니다
            2. addEventListener : 이벤트 리스너를 추가합니다
            3. dispatchEvent : 이벤트 리스너를 호출 시 사용합니다
            4. 리스너로 데이터를 전송하기 위해서는 detail: {key:value} 형식을 지켜야합니다
            */



            // [커스텀 이벤트 리스너 등록]
            document.body.addEventListener("myEvent", function(event) {
                console.log("");
                console.log("[window onload] : [myEvent] : 커스텀 이벤트 리스너 동작 실시");
                console.log("[window onload] : [msg data] : " + event.detail.msg);
                console.log(""); 

                // [전달 받은 데이터 확인 실시]
            });



            // [반복문 수행 실시]
            for(var i=1; i<3; i++){

                // [일반 호출]
                /*
                const sendEvent = new CustomEvent('myEvent');
                document.body.dispatchEvent(sendEvent); 
                // */


                // [데이터 삽입 호출]
                //*
                const sendEvent = new CustomEvent('myEvent', {
                    detail: {
                        msg: i
                    }   
                });
                document.body.dispatchEvent(sendEvent);
                // */
            }
        };

    </script>

 

---

[결과 출력]

​

---