2023.03.19
자바스크립트 스터디 9회차
공부 사이트: https://poiemaweb.com/
32. 이벤트
이벤트가 발생하면 이를 감지하고, 대응하는 처리를 호출해 주어야 한다.
브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지를 해준다. 이런 과정을 통해 사용자와 웹 페이지가 상호작용이 가능하다.
발생한 이벤트에 맞게 반응하기 위해 함수를 사용한다. ← 이 함수가 이벤트 핸들러
1) 이벤트 루프와 동시성
브라우저는 단일 스레드에서 이벤트 드리븐 방식으로 동작한다.
＃단일 스레드: 스레드가 하나이므로 하나의 작업만을 처리할 수있다.
그러나 웹 애플리케이션은 많은 작업이 동시에 처리되는 것처럼 느껴지는데, 이는 자바스크립트의 동시성 때문이다.
동시성을 지원하는 것이 이벤트 루프이다.
ㅇ Call Stack: 함수가 호출되면 순차적으로 Cal Stack에 쌓임. 순차적으로 실행. 자바스크립트는 하나의 Call Stack을 사용하므로, 해당 작업이 끝나기 전에는 다른 어떤 작업도 수행될 수 없음.
ㅇ Heap: 동적으로 생성된 객체 인스턴스가 할당되는 영역
ㅇ Event Queue: 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수의 콜백 함수가 보관되는 영역. 이벤트 루프에 의해 특정 시점에 순차적으로 Call Stack으로 이동되어 실행됨.
ㅇ Event Loop: Call Stack 내에서 현재 실행 중인 작업이 있는지, Event Queue에 작업이 있는지 반복하여 확인. 만약 Call Stack이 비어있다면, Event Queue 내의 작업이 Call Stack으로 이동하고 실행됨.
2) 이벤트의 종류
① UI Event
- load : 웹페이지 로드 완료 시
- unload : 웹페이지 언로드 시 (새로운 페이지 요청 등)
- error : 브라우저가 자바스크립트 오류를 만났거나 요청 자원이 존재하지 않을 때
- resize : 브라우저 창 크기 조절
- scroll : 사용자가 페이지를 스크롤
- select : 텍스트 선택 시
② Keyboard Event
- keydown : 키 다운
- keyup: 키 업
- keypress: 키 다운 후 키 업
③ Mouse Event
- click : 마우스 클릭
- dbclick : 마우스 더블클릭
- mousedown : 마우스 다운
- mouseup : 마우스 업
- mousemove : 마우스 무브
- mouseover : 마우스를 요소 위로
- mouseout : 마우스를 요소 밖으로
④ Focus Event
- focus / focusin : 요소가 포커스를 얻었을 때
- blur / foucusout : 요소가 포커스를 잃었을 때
⑤ Form Event
- input : input / textarea 요소 값 변경 시
- change : select box, checkbox, radio button 상태 변경 시
- submit : form을 submit
- reset : reset 버튼 클릭
⑥ Clopboard Event
- cut : 콘텐츠 잘라내기
- copy : 콘텐츠 복사
- paste : 콘텐츠 붙여넣기
3) 이벤트 핸들러 등록 방법
① 인라인 이벤트 핸들러 방식
- 사용 금지
② 이벤트 핸들러 프로퍼티 방식
- HTML과 Javascript가 뒤섞이는 문제 해결 가능.
- 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩할 수 있음
③ addEventListener 메소드 방식 ✔
- 메소드를 통해 대상 DOM 요소에 이벤트를 바인딩하고, 이벤트 발생 시 실행될 콜백함수를 지정할 수 있음
- 제일 좋은 방법
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러 추가 가능
- 버블링 / 캡처링 지원
＃ 버블링: 한 요소에 이벤트 발생 시 요소가 할당된 핸들러가 동작하고, 부모 요소의 핸들러가 동작하고 ... 최상단 부모 요소를 만날 때까지 반복하여 핸들러가 동작 (최하위에서 최상위까지 반복하여 핸들러 동작)
＃ 캡처링: 최상위 태그에서 해당 태그를 찾아서 내려가는 흐름
- HTML 요소 뿐만아니라 DOM 요소에 대해서도 동작함.
<!DOCTYPE html>
<html>
<body>
<button class="btn">TEST</button>
<script>
const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
alert('TEST');
});
</script>
</body>
</html><!-- Username은 두 글자 이상 입력해야 한다 -->
<!DOCTYPE html>
<html>
<body>
<label>Username <input type='text'></label>
<em class="message"></em>
<script>
const MIN_LENGTH = 2;
const input = document.querySelector('input[type=text]');
const msg = document.querySelector('.message');
function checkUsernameLength(n){
if(input.value.length <n){
msg.innerHTML = '이름은 ' + n + '자 이상';
} else {
msg.innerHTML= '';
}
}
input.addEventListener('blur', function() {
checkUsernameLength(MIN_LENGTH);
});
</script>
</body>
</html>
4) 이벤트 핸들러 함수 내부에서의 this
① 인라인 이벤트 핸들러 방식
- this는 전역 객체 window를 가리킴
② 이벤트 핸들러 프로퍼티 방식
- this는 이벤트에 바인딩된 요소를 가리킴
- 이벤트 객체의 currentTarget 프로퍼티와 동일
③ addEventListener 메소드 방식
- this는 이벤트 리스너에 바인딩된 요소를 가리킴
- 이벤트 객체의 currentTarget 프로퍼티와 동일
5) 이벤트 흐름
계층적 구조에 포함되어있는 HTML 요소에 이벤트 발생 시 연쇄적인 반응이 일어난다.
이벤트가 전파되는데, 그 방향에 따라 버블링과 캡처링으로 구분된다.
ㅇ 버블링: 한 요소에 이벤트 발생 시 요소가 할당된 핸들러가 동작하고, 부모 요소의 핸들러가 동작하고 ... 최상단 부모 요소를 만날 때까지 반복하여 핸들러가 동작 (최하위에서 최상위까지 반복하여 핸들러 동작)
ㅇ 캡처링: 최상위 태그에서 해당 태그를 찾아서 내려가는 흐름
※ 버블링과 캡처링은 둘 중 하나만 발생하는 것이 아니라, 캡처링부터 시작하여 버블링으로 종료한다.
→ 이벤트 발생 시 캡처링과 버블링은 순차적으로 발생한다.
ㅇ addEventListener 메소드의 세 번째 매개변수에 true 설정 시 캡처링으로 전파되는 이벤트를 캐치, false로 설정 시 버블링으로 전파되는 이벤트를 캐치한다. (Default : false)
6) Event객체
Event객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공한다. 이벤트 발생 시 event 객체는 동적으로 생성되어 이벤트 핸들러에 인자로 전달된다. (암묵적 전달)
① Event Property
- Event.target : 실제로 이벤트를 발생시킨 요소를 가리킴
- Event.currentTarget : 이벤트에 바인딩된 DOM 요소를 가리킴
- Event.type : 발생한 이벤트의 종류를 나타내는 문자열 반환
- Event.cancelable : 요소의 기본 동작을 취소시킬 수 있는지 여부를 나타냄 (ture/false)
- Event.eventPhase : 이벤트 흐름 상 어느 단계에 있는지를 반환함 ( 0 이벤트 없음 / 1 캡처링 단ㄴ계 / 2 타깃 / 3 버블링 단계)
② Event Delegation
다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신, 하나의 부모 요소에 이벤트 핸들러를 바인딩하는 방법.
③ Event Method
- Event.preventDefault() : 요소가 가지고 있는 기본 동작을 중단시키기 위한 메소드
- Event.stopPropagation(): 어느 한 요소를 이용하여 이벤트를 처리한 후 이벤트가 부모요소로 전파되는 것을 중단
'프로그래밍 > js' 카테고리의 다른 글
| lessons 35. REST API (0) | 2023.03.23 |
|---|---|
| lessons 34. Ajax (0) | 2023.03.22 |
| lessons 31. 동기식/비동기식 처리 모델 (1) | 2023.03.03 |
| lessons 30. DOM (0) | 2023.03.02 |
| lessons 29. 배열 고차 함수 (1) | 2023.02.28 |