[JavaScript] Event 객체

Notice

NOTICE

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Link

Today

Total

관리 메뉴

Fairy ' s

[JavaScript] Event 객체 본문

Study/JavaScript

[JavaScript] Event 객체

berafairy 2023. 3. 26. 01:56

Event

웹 브라우저나 사용자가 실행하는 어떤 동작

- 사용법
ex. button.on[eventname = function() { ... }
ex. body.addEventListener("eventname", (e) => { ... });

문서 로딩 이벤트
about : 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때
error : 문서가 정확이 로딩되지 않을 때
load : 로딩이 끝났을 때
resize : 문서 화면의 크기가 바뀌었을 떄

마우스 이벤트
click : HTML 요소를 클릭했을 때
dbclick : HTML 요소를 더블클릭 했을 때
mousedown : 요소에서 마우스 버튼을 눌렀을 때
mousemove : 요소에서 마우스 포인터를 움직일 때
mouseover : 마우스 포인터를 요소 위로 옮길 때
mouseout : 마우스 포인터가 요소를 벗어날 때
mouseup : 요소 위에 올려놓은 마우스 버튼에서 손을 뗄 때

키보드 이벤트
keydown : 키를 누르는 동안
keypress : 키를 눌렀을 때
keyup : 키에서 손을 뗄 때

폼 이벤트
- 로그인이나 검색, 게시판, 설문 조사처럼 사용자가 데이터를 입력하는 모든 요소
blur : 폼 요소에 포커스를 잃었을 때
charge : 목록이나 체크 상태 등이 변경되었을 때 (<input>, <select>, <textarea> 태그에서 사용)
focus : 폼 요소에 포커스를 놓았을 때 (<label>, <select>, <textarea>, <button> 태그에서 사용)
reset : 폼이 리셋되었을 때
submit : [submit] 버튼을 클릭했을 때

Event 처리

HTML 태그에 함수 연결
→ <태그 on이벤트명 = "함수명>
웹 요소에 함수 연결
→ 요소.on이벤트명 = 함수
이벤트 리스너로 이벤트 처리
→ 요소.addEventListener(이벤트, 함수, 캡처 여부);

Event 객체

웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 만들어진다.
이벤트 객체에 담긴 정보를 프로퍼티 라고 하는데, 프로퍼티들의 종류는 다음과 같다.

event 객체의 프로퍼티

altKey : 이벤트가 발생했을 때 Alt 키를 누르고 있었는지 여부를 확인하여 Boolean 값을 반환
ctrlKey : 이벤트가 발생했을 때 Ctrl 키를 누르고 있었는지 여부를 확인하여 Boolean 값을 반환
shiftKey : 이벤트가 발생했을 때 Shift 키를 누르고 있었는지 여부를 확인하여 Boolean 값을 반환
button : 마우스 키 값을 반환
charCode : keypress 이벤트가 발생할 경우 어떤 키가 눌렸는지 유니코드 값으로 반환
clientX, Y : 이벤트가 발생한 가로, 세로 위치 반환
pageX, Y : 현재 문서를 기준으로 이벤트가 발생한 가로, 세로 위치 반환
screenX, Y : 현재 화면을 기준으로 이벤트가 발생한 가로, 세로 위치 반환
target : 이벤트가 발생한 대상 반환
timeStamp : 이벤트가 발생한 시간을 밀리초 단위로 반환
type : 발생한 이벤트의 이름 반환
which : 키보드와 관련된 이벤트가 발생했을 때 키의 유니코드 값 반환

event 객체의 메서드

preventDefault : (취소할 수 있을 경우) 기본 동작을 취소한다.

Event 전파

웹 요소에서 이벤트 발생 시 해당 요소에서만 이벤트가 처리되는 것이 아니라,
해당 요소를 감싸고 있는 부모 요소, 그리고 그 요소의 부모 요소에서도 똑같이 이벤트가 처리되는 것

버블링

이벤트가 발생한 해당 요소를 감싸고 있는 부모 요소에서도 똑같이 이벤트가 발생한 것으로 간주하는 것
- 아래에서 위(자식 요소에서 부모 요소)로 전파

<html>
<head> ... </head>
<body>
    Body
    <div onclick = "console.log('div')">
        DIV
        <section onclick = "console.log('section')">
            SECTION
            <p onclick = "console.log('p')">P</p>
        </section>
    </div>
    
    <script src = "js/event-propa.js"></script>
</body>
</html>

다음 HTML 코드의 div, section, p에 클릭 이벤트 처리기가 연결되어 있다.
위 코드를 실행하고 p를 클릭하면 콘솔창에 p, section, div 가 모두 나타난다.
body와 html 요소에도 이벤트는 전달되지만, 이들 요소에는 이벤트 처리기가 연결되어 있지 않아 아무런 결과도 나타나지 않는다.

// js/propa.js

const elements = document.querySelectorAll('*');
// 모든 요소를 가져와서 elements에 저장한다.

for(let element of elements) {
    element.addEventListener("click", e =>
    console.log(`event.target: ${e.target.tagName}, event.currentTarget : ${e.currentTarget.tagName}`));
}
// 모든 요소를 순회하며 click 이벤트가 발생하면
// event.target인 태그 이름와 event.currentTarget인 태그 이름을 출력한다.

event.target : 처음 이벤트가 발생한 대상
event.currentTarget : 이벤트가 전파되며 현재 이벤트 처리기가 실행되는 대상
p가 클릭되면 콘솔창에 다음 내용을 출력한다.

event.target : P, currentTarget : P
event.target : P, currentTarget : SECTION
event.target : P, currentTarget : DIV
event.target : P, currentTarget : BODY
event.target : P, currentTarget : HTML

이벤트 캡처링

웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생항 요소까지 차례대로 이벤트가 전파되는 방식
- 위에서 아래(부모 요소에서 자식 요소)로 전파

// js/capturing.js

const elements = document.querySelectorAll('*');

for(let element of elements) {
    element.addEventListener("click", e =>
    console.log(`event.target: ${e.target.tagName}, event.currentTarget : ${e.currentTarget.tagName}`), true);
}
// 이벤트 리스너에서 세 번째 옵션은 기본적으로 false 를 사용한다.
// 따라서 이벤트 캡처링을 사용하려면 이 옵션을 true로 지정해야 한다.

p가 클릭되면 콘솔창에 다음 내용을 출력한다.
p 영역에서 이벤트가 발생했지만 HTML 요소로부터 이벤트가 시작되는 것을 볼 수 있다.

event.target : P, currentTarget : HTML
event.target : P, currentTarget : BODY
event.target : P, currentTarget : DIV
event.target : P, currentTarget : SECTION
event.target : P, currentTarget : P

DOM 활용

DOM 트리와 노드

모든 HTML 태그는 요소(element) 노드가 된다.
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드가 된다.
HTML 태그에 있는 속성은 모두 자식 노드인 속성(attribute) 노드가 된다.
주석은 주석(comment) 노드가 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM TREE 알아보기</title>
</head>
<body>
    <h1>Do it!</h1>
    <img src="images/doit.jpg" alt="공부하는 이미지>
</body>
</html>

노드 리스트

<h1>노드 리스트</h1>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>

<script>
    /* #1 */ document.querySelectorAll("p")
    // 문서에 있는 p요소를 모두 가져온다.
    /* #2 */ document.querySelectorAll("p")[1]
    // 특정 요소 가져오기 (인덱스 1)
</script>

결과 #1

▼ NodeList(3) [p, p, p]
▶ 0: p
  ▶ 1: p
  ▶ 2: p
length: 3
  ▶ [[Prototype]]: NodeList

결과 #2

▼ NodeList(3) [p, p, p]
document.querySelectorAll("p")[1]
<p>CSS</p>

내용이 있는 텍스트 노드 추가

1. 요소 노드 만들기 : createElement()

let newP - document.createElement("p")
<p> ... </p> 추가
새로 추가한 p 요소 노드 ↓

element

2. 텍스트 노드 만들기 : createTextNode()

let textNode = document.createTextNode("TypeScript")
"TypeScript" 추가
새로 추가한 텍스트 노드 ↓

text

TypeScript

3. 자식 노드 연결하기 : appentChild()

netP.appentChile(textNode)
텍스트 노드를 p 요소에 연결한다.
텍스트 노드와 p 요소를 연결한 뒤에는 body와도 연결 해준다.
- document.body.appendChile(newP)

element	text
p	TypeScript

기존의 노드 앞에 새 요소 추가 : insertBefore()

let tsNode = document.createElement("p")
let tsTextNode = document.createTextNode("TypeScript")
tsNode.appendChile(tsTextNode)
// p 요소 노드와 text 노드를 생성해서 두 노드를 연결한 상태

let basisNode = document.querySelectAll("p")[0]
// 첫 번째 p 요소를 기준 노드로 정한다.
document.body.insertBefore(tsNode, basisNode)
// 기준 노드의 앞에 tsNode를 추가한다.

노드 삭제하기

remove()

heading = document.querySelector("h1")
// querySelector로 h1 태그를 선택한다.

heading.remove()
// heading에서 선택한 요소가 삭제된다.

노드.parentNode

document.querySelector("h1").parentNode
// 다음 명령어를 통해 부모 노드를 찾을 수 있다.

부모노드.removeChild()

const items = document.querySelectoyAll("li");
// 모든 li 항목 선택

for(item of items) { // item은 items 노드 리스트의 li를 가리킨다.
    item.addEventListener("click", function() { // 항목을 클릭했을 때 실행할 함수
        this.parentNode.removeChild(this); // 부모 노드에서 삭제
    });
}

this를 사용할 때에는 이벤트 리스너에서 function() { ... } 에 this를 사용하면,
this는 이벤트가 발생한 노드를 가리킨다. 즉, 목록의 항목중 첫 번째 항목을 클릭하면 this는 첫 번째 항목이 된다.
하지만 아래 소스 처럼 화살표 함수를 사용하게 되면 this는 window 객체를 가리킨다.
window 객체는 DOM의 최상위 객체이므로 클릭한 대상을 this라는 예약어로 사용하려면,
화살표 함수가 아닌 익명 함수 형식으로 지정해야한다.

for(item of items) {
    item.addEventListener("click", () => {
        this.parentNode.removeChild(this);
    });
}

DOM 구조 활용

p 요소에 삭제 버튼이 들어있는 span 요소를 작성해 span 요소를 클릭할 시 p요소를 삭제하는 소스를 작성해보자.

const buttons = document.querySelectAll("p > span")
// 모든 삭제 버튼을 가져온다.

for(let button of buttons) {
    button.addEventListener("click", function () {
    // 항목을 클릭했을 때 실행할 함수
        this.parentNode.remove(this);
        // 부모 노드(<p>)에서 삭제한다. 
    });
}

내장 객체

사용자가 손쉽게 가져와서 사용할 수 있도록 미리 만들어진 객체

웹 브라우저 창에서 웹 문서를 열면 가장 먼저 window라는 객체가 만들어지고,
하위에 웹 브라우저 창의 각 요소에 해당하는 객체들이 만들어진다.
하위 객체들은 웹 브라우저 창의 각 요소(웹 문서, 주소 표시줄)에 해당하는 객체들이며 각 또 다른 하위 객체를 가지고 있다.

window 객체

웹 브라우저 창과 관련된 정보를 가지고 있으며, 웹 브라우저 창을 관리한다.
window.프로퍼티이름 (프로퍼티 종류 ↓)

document : 웹 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
frameElement : 현재 창이 다른 요소 안에 포함되어 있으면 해당 요소 반환 ,그렇지 않으면 null 반환
sessionStorage : 웹 브라우저 창에서 데이터를 저장하는 세션 스토리지에 접근
localStorage : 웹 브라우저 창에서 데이터를 저장하는 로컬 스토리지에 접근
location : window 객체의 위치 / 현재 URL 표시
name : 웹 브라우저 창의 이름을 가져오거나 수정
parent : 현재 창이나 서브 프레임의 부모
innerHeight, Width : 내용 영역의 높이, 너비
outerHeight, Width : 웹 브라우저 창의 바깥쪽(외부) 높이, 너비
pageXOffset, YOffset (scrollX, Y) : 스크롤했을 때 수평으로 이동하는 픽셀(px) 수 / scrollX, Y와 같다.
screenX, Y : 웹 브라우저 창의 왼쪽, 위쪽 테두리가 모니터 왼쪽, 위쪽 테두리에서부터 떨어져있는 거리

window 객체의 메서드

alert() : 알림 창 표시
blur() : 창에서 포커스 제거
close() : 창 닫기
confirm() : 확인, 취소 버튼이 있는 확인 창 표시
focus() : 현재 창에 포커스를 맞추기
moveBy, To() : 현재 창을 지정한 크기, 좌표만큼 이동한다.
open(경로, 창 이름, 창 옵션) : 새로운 창 열기
postMessage() : 다른 창으로 메시지 전달
print() : 현재 문서를 인쇄
prompt() : 프롬프트 창에 입력한 텍스트 반환
resizeBy() : 지정한 크기만큼 현재 창의 크기 조절
resizeTo() : 브라우저 창의 크기를 지정한 크기만큼 조절
scroll() : 특정 위치로 스크롤
scrollBy() : 지정한 크기만큼 스크롤
scrollTo() : 지정한 위치까지 한 번에 스크롤
setCursor() : 현재 창의 커서 변경
showModalDialog() : 모달 창(웹 페이지 또는 애플리케이션의 기본 콘텐츠 위에 표시되는 GUI 요소) 열기
sizeToContent() : 내용에 맞게 창의 크기를 맞춘다.
stop() : 웹 문서 가져오기를 멈춘다.

Date 객체

날짜와 시간에 대한 정보를 조절할 수 있다.

let today = new Date()

today // 오늘 날짜, 시간
>> Sat Apr 1 2023 19:00:00 GMT+0900 (한국 표준시)

today.getFullYear() // 현재 연도
>> 2023

today.getMonth() // 현재 월 값
>> 3 // 0(1월)~ 11(12월)

today.getDate() // 현재 날짜
>> 1 // 1 ~ 31 사이의 숫자

today.getDate() // 현재 요일 값
>> 6 // 0(일요일) ~ 6(토요일)

today.getTime() // 현재 시간
>> 19:00:00

today.getHours() // 현재 시 값
>> 19 // 0 ~ 23 사이의 숫자

today.getMinutes() // 현재 분 값
>> 0 // 0 ~ 59 사이의 숫자

today.getSeconds() // 현재 초 값
>> 0 // 0 ~ 59 사이의 숫자

today.getMilliseconds() // 현재 밀리초 값
>> 0 // 0 ~ 999 사이의 숫자

setFullYear() : 현재 시간 기준으로 연도 설정
setMonth() : 현재 시간 기준으로 월 설정
setDate() : 현재 시간 기준으로 일 설정
setTime() : 1970년 1월 1일 00:00부터 지난 시간을 밀리초로 설정
setHours() : 현재 시간 기준으로 시 설정
setMinutes() : 현재 시간 기준으로 분 설정
setSeconds() : 현재 시간 기준으로 초 설정
setMilliseconds() : 현재 시간 기준으로 밀리초 설정

날짜와 시간 형식을 바꾸는 메서드

toUTCString() : '요일 일 월 연도 시:분:초 UTC' 형식
toLocaleString() : '월/일/연도 시:분:초' 형식
toString() : '요일 월 날짜 시:분:초 UTC+대한민국 표준시' 형식
toDateString() : Date에서 날짜 부분만 표시
toTimeString() : Date 에서 시간 부분만 표시

Math 객체

수학적인 계산과 관련된 메서드들이 포함되어 있다.

Math 객체 프로퍼티

E : 오일러 상수
PI : 원주율(π)
SQRT2 : 루트 2
SQRT1_2 : 1 루트 2
LN2 : loge 2
LN10 : loge 10
LOG2E : loge e
LOG10E : log10 e

Math 객체 메서드

abs() : 절댓값
sqrt() : 매개변수에 대한 제곱근
random() : 0과 1사이 무작위 수
ceil() : 매개변수의 소수점 이하 부분을 올린다.
floor() : 매개변수의 소수점 이하 부분을 버린다.
round() : 매개변수의 소수점 이하 부분
exp() : 지수 함수
cos() : 코사인 값
sin() : 사인 값
tan() : 탄젠트 값
acos() : 아그코사인 값
asin() : 아크사인 값
atan() : 아크탄젠트 값 (범위 : -π/2 ~ π/2).
atan2() : 아크탄젠트 값 (범위 : -π ~ π)
log() : 매개변수에 대한 로그 값
max() : 매개변수 중 최댓 값
min() : 매개변수 중 최솟 값
pow() : 매개변수의 지숫 값

저작자표시 비영리 변경금지

'Study > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 만들기 (0)	2023.04.03
[JavaScript] 내장 객체 (0)	2023.04.02
[JavaScript] DOM 객체 (0)	2023.04.02
[JavaScript] 함수 (0)	2023.03.24
[JavaScript] 기초 (0)	2023.03.22