1. Event(이벤트)
- 마우스 클립, 키보드 입력, 이미지나 HTML 문서의 로딩, 타이머의 타임아웃 등 사용자의 입력 행위나 문서나 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지(notification)
- HTML5의 이벤트 종류는 70여가지
1) 이벤트 리스너
- 발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드
- 이벤트 리스너 이름은 이벤트 이름 앞에 on을 덧붙임
2) 이벤트 리스너 만들기
위의 결과는 아래의 (1) ~ (4)까지의 코드 결과물임
(1) HTML 태그 내에 작성
HTML 태그의 이벤트 리스너 속성에 리스너 코드 직접 작성
<!DOCTYPE html>
<head>
</head>
<body>
<p>HTML 태그에 리스너 작성</p>
<hr>
<p onmouseover="this.style.backgroundColor='orchid'" onmouseout="this.style.backgroundColor='white'">
마우스 올리면 orchid색으로 변경</p>
</body>
</html>(2) DOM 객체의 이벤트 리스너 프로퍼티에 작성
DOM 객체의 이벤트 리스너 프로퍼티에 이벤트 리스너 코드 작성
(3) DOM 객체의 addEventListener() 메소드 이용
addEventListener() 메소드
[, userCapture]은 생략가능
(4) 익명 함수로 이벤트 리스너 만들기
익명 함수(anonymous function)
코드가 짧거나 한 곳에서만 사용하는 경우 함수 이름없이 필요한 곳에 함수의 코드를 바로 작성
2. 이벤트 객체
- 발생한 이벤트에 관련된 다양한 정보를 담은 객체
- 이벤트가 처리되고 나면 이벤트 객체는 소멸
1) 이벤트 객체 전달받기
이벤트 객체는 이벤트 리스너 함수의 첫 번째 매개변수에 전달
(1) 이름을 가진 이벤트 리스너
(2) 익명 함수의 경우
(3) HTML 태그에 이벤트 리스너 : event 라는 이름으로 전달
❗❗❗코드 입력하기
2) 이벤트 객체에 들어있는 정보
- 현재 발생한 이벤트에 관한 다양한 정보(이벤트 객체의 프로퍼티와 메서드를 통해 알 수 있음)
- 이벤트 종류마다 조금씩 다름(아래는 이벤트 객체의 공통 멤버)
- target 프로퍼티
- 이벤트 타겟 객체를 가르킴
- 이벤트 타겟 : 이벤트를 유발시킨 DOM 객체
<button>태그의 버튼을 클릭하였으면, 이때 click 이벤트의 이벤트 타겟은 버튼
3. 이벤트의 디폴트 행동 취소, preventDefault()
이벤트을 디폴트 행동이란 특정 이벤트에 대한 HTML 태그의 기본 행동을 의미
1) 이벤트의 디폴트 행동을 막는 방법
(1) 이벤트 리스너에서 false를 리턴
(2) 이벤트 객체의 preventDefault() 메소드 호출
2) 이벤트 객체의 cancelable 프로퍼티가 true인 경우만 취소 가능
4. 이벤트 흐름
이벤트가 발생하면 window 객체에 먼저 도달하고, DOM트리를 따라 이벤트 타겟에 도착하고 다시 반대 방향으로 흘러 window 객체에 도달한 다음 사라지는 과정
1) 이벤트가 흘러가는 과정
(1) 캡쳐 단계(capturing phase)
- 이벤트가 window 객체에서 중간의 모든 DOM 객체를 거쳐 타겟 객체에 전달되는 과정
- 이벤트가 거쳐가는 모든 DOM 객체(window포함)의 이벤트 리스너 실행
(2) 버블 단계(bubbling phase)
- 이벤트가 타겟에서 중간의 모든 DOM 객체를 거쳐 window 객체에 전달되는 과정
- 이벤트가 거쳐가는 모든 DOM 객체(window포함)의 이벤트 리스너 실행
DOM 객체에는 캡쳐 리스너와 버블 리스너 두 개 모두 작성할 수 있음
5. 캡쳐 리스너와 버블 리스너
1) DOM 객체의 이벤트 리스너
- 캡쳐 리스너와 버블 리스너를 모두 소유 가능
- 이벤트 리스너 등록시 캡쳐 리스너인지 버블 리스너인지 구분
2) 캡쳐 리스너와 버블 리스너 등록
addEventListener()의 3번째 매개변수를 이용
3) 익명 함수로 이벤트 리스너 등록
- 버블 리스너로 자동 등록
❗❗❗6. stopPropagation() : 이벤트 흐름 중단시키기
- e.preventDefault는 고유 동작을 중단시킴
- stopPropagation는 상위 엘리먼트에게 이벤트 전파를 중단시킴. 즉 버블이 생기지않는다.
7. 마우스 핸들링
마우스 이벤트 객체의 프로퍼티
1. 마우스 이벤트 객체의 프로퍼티
2. 마우스 관련 이벤트 리스너 호출
8. 로딩 완료와 onload
window 객체에 발생하며 웹페이지의 로딩 완료시 호출되는 이벤트 리스너
1) 문서 onload 리스너 작성 방법
2) 이미지 onload
(1) Image 객체
<img>태그에 의해 생성되는 DOM 객체new Image();자바스크립트 코드에 의해 생성되는 객체
(2) onload
- 이미지의 로딩이 완료되면 Image 객체에 발생하는 이벤트(3) 새로운 이미지를 로딩하는 방법
2_1) 이미지 로딩시 주의할 점
(1) 잘못된 이미지 로딩 코드
(2) 코드 수정
2_2) new Image()로 이미지 로딩과 출력
(1) 동적으로 이미지 객체 생성
new Image()로 이미지 객체가 생겼지만 화면에 출력되지 않음
(2) new Image()의 이미지 객체에 이미지 로딩
(3) 로딩한 이미지 출력
9. onblur와 onfocus
1) 포커스
- 포커스는 현재 키 입력에 대한 독점권
- 브라우저는 포커스를 가지고 있는 HTML 태그 요소
2) onblur
- 포커스를 잃을 때 발생하는 이벤트 리스너
3) onfocus
- 포커스를 얻을 때 발생하는 이벤트 리스너
10. 라디오버튼과 체크박스
1) 라디오버튼 객체
<input type="radio">로 만들어진 라디오 버튼 DOM 객체
1_1) 라디오버튼 객체들 알아내기
2) 체크박스 객체
<input type="checkbox">로 만들어진 체크박스 DOM 객체
11. select 객체와 onchange
1) <select> 태그로 만들어진 콤보 박스
(1) option 객체는 <option>태그로 표현되는 옵션 아이템
(2) 선택된 옵션 알아내기
(3) 옵션 선택
(4) select와 onchange 리스너
- 선택된 옵션이 변경되면 select 객체의 onchange 리스너 호출
12. 키 이벤트
1) onkeydown
- 키가 눌러지는 순간 호출. 모든 키에 대해 작동
2) onkeypress
- 문자 키와 Enter, Space, Esc 키에 대해서만 눌러지는 순간에 추가 호출
- 문자 키가 아닌 경우(F1, Shift, PgDn, Del, Ins 등) 호출되지 않음
3) onkeyup
- 눌러진 키가 떼어지는 순간 호출
13. onreset과 onsubmit
1) onreset
- reset 버튼(
<input type="reset">) 클릭 시 - false를 리턴하면 폼이 초기화되지 않음
2) onsubmit
- submit(
<input type="submit">) 버튼 클릭 시 - false를 리턴하면 폼 전송하지 않음
3) 리스너 작성
- onreset과 onsubmit 리스너는
<form>태그에 달아야 한다.
Let's smile for future 🤩