24장. 이벤트

[ 목차 ]

1. 이벤트

2. 이벤트 루프와 동시성

3. 이벤트의 종류

4. 이벤트 핸들러 등록 - 인라인 이벤트 핸들러 방식

5. 이벤트 핸들러 등록 - 이벤트 핸들러 프로퍼티 방식

6. 이벤트 핸들러 등록 - addEventListner 메소드 방식

 

1. 이벤트

1) 어떤 사건을 의미

2) 브라워의 이벤트는 사용자가 버튼을 크릭, 웹페이지가 로드 되었을 때와 같은 상황으로, DOM요소와 관련

3) 이벤트 발생 시점이나 순서는 사전에 인지할 수 없기에 누군가 이를 감지할 수 있어야 하며 대응하는 처리를 호출

4) 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 통지하고, 이를 통해 사용자와 웹페이지는 상호작용

5) 이벤트가 발생하면 그에 맞는 반응을 해야하며 보통 함수(이벤트 핸들러)에 연결되고 이벤트가 발생하면 함수가 실행

 

2. 이벤트 루프와 동시성

1) 브라우저는 단일 쓰레드에서 이벤트 드리븐 방식으로 동작

2) 단일 쓰레드 : 쓰레드가 하나분이며, 하나의 작업만을 처리할 수 있다는 것을 의미

3) 하지만 실제로 동작하는 웹 페이플리케이션은 많은 tack가 동시에 처리되는 것처럼 느껴지는데, 이러한 자바 스크립트의 동시성을 지원하는 것이 이벤트 루프

 

3. 이벤트의 종류

1) UI Event

2) Keyboard Event

3) Mouse Event

4. Focus Evnet

5. Form Event

6. Clipboard Event

 

4. 이벤트 핸들러 등록 - 인라인 이벤트 핸들러 방식

1) html 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방

2) 이젠 사용하지 않는 방식이지만 오래된 코드에서 간혹 상요한 것이 있음

3) 이벤트 어트리뷰트의 값은 암묵적으로 정의되는 이벤트 핸들러의 문이기에 여러 개의 문 전달 가능

 

5. 이벤트 핸들러 등록 - 이벤트 핸들러 프로퍼티 방식

1) 이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 존재

 

6. 이벤트 핸들러 등록 - addEventListner 메소드 방식

1) addEveneListener 메소드를 이용해 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정

2) 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가 가능

3) 캡처링, 버블링 지언

4) HTML요소뿐만아니라 모든 DOM요소에 대해서 동작하며 브라우저 웹문서를 로드한 후 파싱하여 DOM을 생성

5) IE9 이상에서 동작

6) input 요소와 blur이벤트에 이베트 핸들러 바인딩

 

7) 버튼에 이벤트 핸들링

 

 

 

 

+ 로그인