[일곱번째] JavaScript - Web Browser / 이벤트 I

이벤트

자바스크립트의 하이라이트!

이벤트란 말 그대로 사건. 웹 브라우저 상에서 일어나는 사건을 말한다.

- 이벤트 타겟(event target) : 이벤트가 발생하는 태그

- 이벤트 타입(event type) : onclick ...

- 이벤트 핸들러 : 실행될 코드

이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다.

크게 3가지 등록방법이 있다.

1. inline 방식

태그안에 이벤트가 속성으로 직접 들어가 있다.

태그에 직접 기술되어 있기 때문에 어떤 이벤트가 있는지 알기 쉽다.

HTML의 정보로서의 목적에 어긋난다.

또한 복잡한 코드를 삽입할 수 없다.

2. 프로퍼티 리스너

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식

event || window.event;

event 가 없다면 window.event를 쓰겠다.

3. addEventListener() 방식

addEventListener(A,B) : A(이벤트 객체)라는 입력을 받으면 B를 호출한다.

하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다.

추가가 가능하다.

프로퍼티 리스터로는 단 하나의 이벤트 타입 리스너를 등록할 수 있다.

이벤트 전파(버블링과 캡처링)

캡처링(capturing) : html - body - fieldset - button (부모 이벤트 핸들러 -> 자식 이벤트 핸들러)

버블링(bubbling) : button - fieldset - body - html (자식 이벤트 핸들러 -> 부모 이벤트 핸들러)

캡처링은 과거의 버전에선 지원을 하지 않는다.

- 캡처링

(호출결과)

눌러진 영역 / 호출된 곳 / 가동된 capturing

1. INPUT HTML capturing

2. INPUT BODY capturing

3. INPUT FIELDSET capturing

4. INPUT INPUT target

1. FIELDSET HTML capturing

2. FIELDSET BODY capturing

3. FIELDSET FIELDSET target

1. BODY HTML capturing

2. BODY BODY target

1. HTML HTML target

(번호는 출력된 순서를 의미한다.)

=>> 가장 바깥에 있는 태그가 먼저 클릭에 영향을 받게 되고 점점 하위 단계로 내려간다. 

양파껍질 까지는 것처럼.

- 버블링

(호출결과)

눌러진 영역 / 호출된 곳 / 가동된 bubbling

INPUT INPUT target

INPUT FIELDSET bubbling

INPUT BODY bubbling

INPUT HTML bubbling

=>> 사용자의 목적을 알고 있는 듯이 우선적으로 국소적인 부분을 발동시킨다. 그리고 상위 단계로 점점 올라온다. 기포 물방울이 몽실몽실 올라오는 것처럼.

생활코딩 이고잉님 감사합니다^^

-..-