[Javascript] 이벤트 트리거를 사용하여 input 속성을 커스터마이징 해보자!

이번 포스팅은 이벤트 트리거를 사용하여 input 속성을 커스터마이징 해보겠습니다.

 

html에서 input 속성을 그대로 사용하면 아래와 같습니다.

 

css로 꾸미려고 하면 다음과 같이 됩니다.

 

파일 선택만 남기고 깔끔하게 디자인을 할 수 있는 방법이 없을까요?

 

자바스크립트에서 제공하는 이벤트 트리거라는 기능을 사용하면 깔끔하게 디자인이 가능합니다.

 

 

이벤트 트리거

트리거는 '방아쇠'를 의미합니다.

방아쇠를 당기면 총알이 나가는 것처럼 어떠한 행위(클릭 등)를 했을 때 파일을 선택할 수 있도록 할 수 있습니다.

 

span 태그를 하나 생성해서 span 태그를 눌렀을 때 위의 input을 실행시켜보겠습니다.

 

우선 하나의 div태그에 input, span을 같이 넣어두겠습니다.

 

<div>
    <input type="file">
    <span class="file-button">파일선택</span>
</div>

 

이 상태라면 파일 선택이 두개이니 input 속성을 display: none을 통해 숨겨보겠습니다.

지금은 파일 선택에 아무런 이벤트가 걸려있지 않기 때문에 아무리 클릭을 해도 아무런 반응이 없는 상태입니다.

 

input 속성과 span 태그를 객체로 받아오는 작업을 먼저 하겠습니다.그리고 span 태그를 클릭했을 때 이벤트가 실행되어야 하니 다음과 같이 코드를 작성합니다.

var fileButton = section.querySelector(".file-button");
var file = section.querySelector("input[type=file]");

fileButton.onclick = function(e) {
    
}

 

이후 이벤트 트리거를 하기 위해 MouseEvent 객체를 생성해야 하는데 view, bubbles, cancelable을 다음과 같이 설정해야 합니다.

그리고 dispatchEvent 메서드를 통해 MouseEvent 객체를 넘겨주면 됩니다.

var fileButton = section.querySelector(".file-button");
var file = section.querySelector("input[type=file]");

fileButton.onclick = function(e) {
    var event = new MouseEvent("click", {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });

    file.dispatchEvent(event);
}

그럼 span 태그를 클릭해도 input의 file 속성이 동작하여 파일을 선택할 수 있습니다.

 

뿐만 아니라 span 태그에 css효과를 주어 다음과 같이 디자인을 할 수도 있습니다.

 

 

인터넷 익스플로러의 과거 버전에서는 MouseEvent를 객체를 생성하기 위해서는 다음과 같습니다.

var event = document.createEvent("MouseEvent");
event.initEvent("click", true, true); // event type, bubbles, cancelable

 

createEvent, initEvent 메서드를 외우는 것보다는 이런게 있구나 하면서 넘어가는 것이 좋을 것 같습니다.