[240525] 40장 이벤트 (1)
이벤트 드리븐 프로그래밍
- 이벤트 핸들러 ( event handler ) : 특정 이벤트가 발생했을 때 호출될 함수
- 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것
- 마우스 클릭 이런건 함수를 언제 호출할 지 알 수 없으므로, 브라우저에게 함수 호출을 위힘하는 것임
- 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍 (event-driven-programming)이라 함
이벤트 타입
- 이벤트 종류를 나타내는 문자열
- MDN Event reference 에서 확인 가능
1. 마우스 이벤트
- click, dbclick, mousedown, mouseup, mousemove, mouseenter, mouseover, mouseleave, mouseout …
2. 키보드 이벤트
- keydown,keypress, keyup …
3. 포커스 이벤트
- focus, blur, focusin, focusout …
4. 폼 이벤트
- submit
- form 요소 내의 input select 입력 필드에서 엔터 키를 눌렀을 때
- form 요소 내의 submit 버튼을 클릭했을때
- submit 이벤트는 form 요소에서 발생
- rest
- form 요소 내의 reset 버튼 클릭했을 때
5. 값 변경 이벤트
- input, change, readystatechange …
6. DOM 뮤테이션 이벤트
- DOMContentLoaded
- HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료 되었을 때
7. 뷰 이벤트
- resize, scroll …
8. 리소스 이벤트
- load, unload, abort, error …
이벤트 핸들러 등록
1. 이벤트 핸들러 어트리뷰트 방식
<button onClick = "sayHi('Lee')">Click me!</button>
<script>
function sayHi(name) {
console.log(`Hi! ${name}.`);
}
</script>
- 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록된다.
- 주의할 점은 함수 참조가 아닌 함수 호출문 등의 문을 할당함
- 함수 호출문의 평가 결과가 이벤트 핸들러에 등록
- 함수를 반환하는 고차 함수 호출문을 이벤트 핸들러로 등록하면 문제가 없겠지만, 함수가 아닌 값을 반환하는 함수 호출문을 이벤트 핸들러로 등록하면 브라우저가 이벤트 핸들러를 호출할 수 없다.
- 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 몸체를 의미한다.
- 이처럼 동작하는 이유는 이벤트 핸들러에 인수를 전달하기 위해서다. 값으로 함수 참조를 할당해야한다면 이벤트 핸들러에 인수를 전달하기 곤란하다.
- 이벤트 핸들러 어트리뷰트 값으로 할당한 문자열은 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체다. 여러개의 문을 할당 가능
- HTML과 자바스크립트는 관심사가 다르므로 사용하지 않는 것 추천
2. 이벤트 핸들러 프로퍼티 방식
- window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있음.
- window 객체 : 브라우저의 전체 창(window)에 대한 전역 객체(global object)
- DOM 노드 객체 : HTML 문서의 요소를 자바스크립트로 조작할 수 있게 해주는 객체
$button.onclick = function () {
console.log('button click');
};
- 이벤트 타깃, 이벤트타입, 이벤트 핸들러를 지정
- 하나의 이벤트 핸들러만 바인딩할 수 있는 단점이 있음
3. addEventListener 메서드 방식
-
DOM Level 2 에서 도입 ( 앞에 두 방법은 level 0 부터 제공 )
- 첫번째 매개변수 : on 접두사 없이 이벤트 타입
- 두번째 매개변수: 이벤트 핸들러 전달
- 마지막: 전파 단계 ( 캡처링, 버블링 ) 지정, 생략하거나 false 면 버블링
$button.addEventListener('click', function() {
console.log('button click');
});
- 하나 이상의 이벤트 핸들러 등록 가능
- 참조가 동일한 이벤트 핸들러를 중복하면 하나의 핸들러만 등록됨
Leave a comment