이벤트/ 버블링/ 캡쳐링

1. 이벤트 위임방식 메커니즘

if 로 제약조건을 주고 event 객체로 현재위치 값을 잡아서 실행시켜준다.

-- 이벤트 위임방식은 많이 사용되는 강력한 핸들링 패턴입니다.

-- event.target 현재 이벤트를 발생시킨 대상

-- event.currentTarget 실제 이벤트를 발생시키는 부모태그 혹은 다른 태그

A. 버블링 

-- DOM의 이벤트 동작 방식은 버블링입니다.

-- 클릭을 누름과 동시에 모든 영역에서 탐색이 들어가서 누른 곳을 찾습니다. -- 이것을 캡쳐링이라고 합니다.

-- 이벤트 발생한 곳을 찾은 뒤에 다시 최상위 객체인 window에 전달을 합니다 -- 이것을 버블링이라고 합니다.

-- 캡처링이 끝난 후 다시 window로 올라가는 과정에서 존재하는 모든 이벤트객체를 실행시킵니다.

-- 캡처링 페이즈에서는 실행이 되지는 않습니다.

 

 

B. 캡쳐링

--이벤트 발생 시 찾아내려 가는 과정을 캡쳐링이라고 합니다.

-- window에서 자식영역까지 순차적으로 이벤트 발생시점을 도출해 나갑니다.

-- 캡쳐링은 addEventListener으로만 구현이 가능합니다.

캡쳐링을 구현할 일은 거의 없습니다.

2. 다중 이벤트- 버튼이 여러 개인 경우

버튼마다 클래스를 따로줘서 제어문으로 제약을 걸어주면된다.

3. PreventDefault 고유 이벤트를 삭제함

form태그나 a태그 submit같이 기본 이벤트가 존재하는 태그의 기능을 삭제하는 용도로 씁니다.

 

4. 드래그 앤 드랍

5. 파일을 드래그 앤 드랍하기

파일은 이벤트객체의 dataTransfer 객체에 저장된다.