이벤트 트리거

Trigger : 유발자, 방아쇠
위 설명처럼 dispatchEvent()를 통해 span을 파일 버튼으로 사용할 수 있다.

HTML

    <section id = "section5">
        <h1>Ex5- 이벤트 트리거</h1>
        <style>
            .file-button{
                display:none; //input의 파일선택버튼 숨김.
            }
            .file-trigger-button{
                background-color: blue;
                border: 1px solid deepskyblue;
                border-radius: 5px;

                padding: 5px 10px;
                cursor: pointer;
            }
            .file-trigger-button:hover{
                background-color: lightblue;
            }
        </style>
        
        <input type = "file" class = "file-button">
        <span class = "file-trigger-button">파일선택</span>
    </section>
    <hr />

JavaScript

//Ex5- Trigger
window.addEventListener("load", function () {
    var section = document.querySelector("#section5");
    var fileButton = section.querySelector(".file-button");
    var fileTriggerButton = section.querySelector(".file-trigger-button");
    
    fileTriggerButton.onclick = function(){
        var event = new MouseEvent("click",{
            'view':window, //
            'bubbles':true, //버블링이 가능한지
            'cancelable':true //취소 가능한지
        });

        fileButton.dispatchEvent(event);
    }
});

fileTriggerButton이 이벤트를 전달시켜 fileButton에 event를 발생시킨다.