event.target,input.file,FileAPI_210603(목)

event.target , event.currentTarget 속성이란

이벤트 위임

 

이벤트 버블링과 이벤트 캡쳐링이란 특성을 적절히 사용하면 여러개의 요소가 있을 때 각각의 요소에 이벤트를 일일히 지정할 필요 없이 부모 요소에 이벤트를 하나만 주어 코드의 재사용성을 높이고 메모리를 절약할 수 있다.

<ul id="parent-list">
    <li id="1">Item 1</li>
    <li id="2">Item 2</li>
    <li id="3">Item 3</li>
    <li id="4">Item 4</li>
    <li id="5">Item 5</li>
    <li id="6">Item 6</li>
</ul>

<script>
document.getElementById("parent-list").addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "LI") {
        console.log(e.target.id);
    }
});
</script>

​

위 코드의 동작을 확인하면 해당 item을 클릭했을 때 그 item의 id 값을 반환한다. 그러나 script 코드를 보면 이벤트는 각 item이 아닌 그 item들을 감싸고 있는 parent-list에 준 것을 확인할 수 있다.

​

이벤트 객체

이벤트 객체란 이벤트가 일어나는 요소 그 자체를 의미한다. 앞서 본 코드에서 addEventListener("click", function(e) 부분에서 e.target 이 바로 이벤트 객체를 나타낸다.

그런데 자바스크립트 이벤트 코드를 뜯어보면 어떤 사람은 event.target을 또 어떤 사람은 event.currentTarget을 사용하는 것을 볼 수 있을 것이다.

이 둘에는 차이가 있는데 event.currentTarget은 이벤트가 걸려있는 위치를 반환(this가 가리키는 것과 같다.)하고 event.target은 실제 이벤트가 발생하는 위치, 내가 클릭한 요소를 반환한다. 두 객체가 같을 수도 있지만 이벤트 위임을 통해 이벤트를 주었다면 두 개는 다른 값을 가질 것이다.

이벤트 위임에서 예시로 든 코드를 예로 들면 event.currentTarget은 parent-list이고 event.target은 그 아래 list들에 해당할 것이다.

---

File API

HTML5 부터 브라우저는 File API 지원하기 시작한다.

File API 는 아래와 같이 정의되어 있다.

API	내용
FileList	파일 리스트
File	파일 데이터
FileReader	파일 읽기
Blob	바이트 데이터

1) FileList

- 생성

var fileList = event.target.files
// 또는
var flieList = 요소.files

요소 = file이 들어가는 태그를 dom으로 가져온 것을 의미

​

2) File

- 생성

// 방법 1.
var fileList = event.target.files
var file = fileList[0];
// 방법 2.
var file = event.target.files[0]; // 생성후바로 꺼내옴

브라우저는 보안상 파일을 조작할 수 없다. 때문에 모든 값은 읽기 전용 이다.

File 은 아래 속성을 가질 수 있다.

1. name : 파일 이름
2. lastModified : 파일을 마지막으로 수정한 Unix Time
3. lastModifiedDate : 파일을 마지막으로 수정한 Date 객체
4. size : 파일의 크기 (Byte 값)
5. type : MIME 유형
//
name: "htm_20190729104652375824.jpg"
lastModified: 1586075186723
lastModifiedDate: Sun Apr 05 2020 17:26:26 GMT+0900 (대한민국 표준시) {}
size: 54973
type: "image/jpeg"
​

File 은 Blob 을 확장하여 구현되었다.

​

​

3) Blob (Binary Large Object)

- 생성

new Blob(ArrayBuffer | Blob | DOMString, {type?: MIME})
Blob.slice(start?, end?, contentType?)
// Blob 의 바이트를 시작 및 끝 바이트 범위에서 복제해 새로운 Blob 객체를 생성하고 반환한다.

Blob 객체는 파일를 text 나 2진 데이터 형태로 읽을 수 있다.

Blob 은 아래 속성을 가질 수 있다.

1. size : 파일의 크기 (Byte 값)
2. type : MIME 유형

​

4) FileReader

- 생성

var fileReader = new FileReader();

FileReader 은 File 이나 Blob 의 내용을 읽을 수 있게 도와준다.

보안상 직접적인 Local Storage 에는 접근할 수 없다.

FileReader 에는 4가지 방법으로 파일을 전달 할 수 있다.

readAsArrayBuffer(file|blob) [ArrayBuffer]
readAsBinaryString(file|blob) [0..255 범위의 문자열]
readAsDataURL(file|blob) [Base64]
readAsText(file|blob) [UTF-16|UTF-8 문자열]

생성 후 즉시 읽는 것이 아니니 onload이벤트 핸들러를 붙여 콜백으로 파일을 다 읽었다면 알려주도록 해야한다.

FileReader 에서 전달 받은 파일을 읽기 성공하면 load EventLinser 에 등록한 function 이 호출된다.

​

이외에 loadstart | progress | loadend | error 로 읽는 상태에 따라 function 이 호출 된다.

---

input 태그의 type="file"

type="file" 로 지정시 input태그에 아래와 같은 속성도 넣을 수 있다.

1) accept

accept="image/*" : 모든 확장자(img,png) 이미지파일
accept="video/*" : 모든 확장자(mp4,) 같은 동영상파일
accept="audio/*" : 모든 확장자(mp3,wav) 같은 오디오파일

2) capture

capture="camera" : 카메라
capture="camcorder" : 동영상
capture="microphone" : 마이크
//capture 속성을 지원하지 않는 브라우저의 경우, 
accept="image/*;capture=camera" //으로 사용할 수도 있다.