1. 이벤트 핸들러 등록하기

1.addEventListener를 통해 이벤트 핸들러를 등록

let btn = document.querySelector("#mybtn')

function event1() {
	console.log('Hi again!')
}

function event2() {
	console.log('Hi codeit!')
}


// element.addEventListener(event, handler)

btn.addEventListener('click', event1);
btn.addEventListener('click', event2);

이는 클릭을 하면 event1이나 2를 실행한다.
함수 제목에서 괄호를 제거

btn.removeEventListener('click', event2);
이는 클릭 시 제거한다. 제거 시 등록한 핸들러를 그대로 사용

2.이벤트 종류

마우스 이벤트

mousedown : 마우스 버튼을 누르는 순간
mouseup : 마우스 버튼을 눌렀다 떼는 순간
click : 왼쪽버튼을 누르는 순간
dbclick : 왼쪽버튼을 더블클릭한 순간
contextmenu : 오른쪽 버튼을 클릭한 순간
mousemove : 마우스를 움직이는 순간
mouseover : 마우스를 올리는 순간
mouseout : 마우스를 올리고 벗어나는 순간
mouseenter : 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave : 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

• 마우스 버튼

• MouseEvent.button

• 0: 마우스 왼쪽 버튼
• 1: 마우스 휠
• 2: 마우스 오른쪽 버튼

• MouseEvent.type

• click: 마우스 왼쪽 버튼을 눌렀을 때
• contextmenu: 마우스 오른쪽 버튼을 눌렀을 때
• dblclick: 동일한 위치에서 빠르게 두번 click할 때
• mousedown: 마우스 버튼을 누른 순간
• mouseup: 마우스 버튼을 눌렀다 뗀 순간

---

• [마우스 이동 이벤트]

• MouseEvent.type

• mousemove: 마우스 포인터가 이동할 때

• mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때

• mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때

• MouseEvent.clientX, clientY

• : 화면에 표시되는 창 기준 마우스 포인터 위치

• MouseEvent.pageX, pageY

• : 웹 문서 전체 기준 마우스 포인터 위치

• MouseEvent.offsetX, offsetY

• : 이벤트가 발생한 요소 기준 마우스 포인터 위치

  MouseEvent.target

• : 이벤트가 발생한 요소

• MouseEvent.relatedTarget

• : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소

• mouseenter / mouseleave
  마우스 엔터와 마우스 리브는 이벤트 버블링이 일어나지 않는다. 그냥 한번들어가면 끝,
  자식 요소에 들어가도 한번만 카운트한다.

키보드 이벤트

keydown : 키보드의 버튼을 누르는 순간
keypress : 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)
keyup : 키보드의 버튼을 눌렀다 떼는 순간

• [키보드 이벤트]

• KeyboardEvent.type

• keydown: 키보드 버튼을 누른 순간 (추천)

• keypress: 키보드 버튼을 누른 순간

• keyup: 키보드 버튼을 눌렀다 뗀 순간

• KeyboardEvent.key

• : 이벤트가 발생한 버튼의 값

• KeyboardEvent.code

• : 이벤트가 발생한 버튼의 키보드에서 물리적인 위치

  key는 버튼의 값을 보여주고 code는 정확히 어디를 눌렀는지 고유코드를 나타냄(오른쪽 쉬프트. 왼쪽 시프트 등등)

focus 이벤트

focusin : 요소에 포커스가 되는 순간
focusout : 요소로부터 포커스가 빠져나가는 순간
focus : 요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
blur : 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)

입력 이벤트

change : 입력된 값이 바뀌는 순간
input : 값이 입력되는 순간
select : 입력 양식의 하나가 선택되는 순간
submit : 폼을 전송하는 순간

스크롤 이벤트

scroll : 스크롤 바가 움직일 때

윈도우 창 이벤트

resize : 윈도우 사이즈를 움직일 때 발생

2.이벤트 객체

function printEvent(event) {
	console.log(event);
    event.target.style.color = 'red';
 }
 
 myInput.addEventListener('keydown',printEvent);
 myBtn.addEventListener('click',printEvent);
 

이벤트 핸들러의 첫번째 파라미터는 자동으로 이벤트 객체가 전달된다.

1. 이벤트 객체 프로퍼티

공통 프로퍼티

type : 이벤트 이름 ('click', 'mouseup', 'keydown' 등)
target : 이벤트가 발생한 요소
currentTarget : 이벤트 핸들러가 등록된 요소
timeStamp : 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
bubbles : 버블링 단계인지를 판단하는 값

마우스 이벤트

button : 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽)
clientX, clientY : 마우스 커서의 브라우저 표시 영역에서의 위치
pageX, pageY : 마우스 커서의 문서 영역에서의 위치
offsetX, offsetY : 마우스 커서의 이벤트 발생한 요소에서의 위치
screenX, screenY : 마우스 커서의 모니터 화면 영역에서의 위치
altKey,ctrlKey, shiftKey : 이벤트가 발생할 때 alt, ctrl, shift키를 눌렀는지
metaKey : 이벤트가 발생할 때 meta키를 눌렀는지(window는 window, mac은 cmd키)

키보드 이벤트

key : 누른 키가 가지고 있는 값
code : 누른 키의 물리적 위치
altKey, ctrlKey, shiftKey, metaKey : 이벤트가 발생할 때 해당키를 눌렀는지

2. 이벤트 버블링

자식 요소의 이벤트를 타고 올라가 부모 요소의 핸들러도 동작한다.

currentTarget

그냥 target을 사용하면 전체 요소의 버블링이 일어나는데 currentTarget을 사용하면 클릭한 부분의 요소만 버블링이 일어난다.

stopPropagation

e.stopPropagation 을 사용하면 버블링이 일어나지 않지만 가급적 피하는 것이 좋다.
부모요소 입장에서 다룰 수 있는 범위가 줄어든다.
ex) 페이지 전체에 명령을 줘야하는 데 특정 부분은 막혀있다.

3. 브라우저 기본 동작

브라우저에는 기본적으로 설정된 동작들이 있다. 예를 들어 드래그 시 나오는 파란 배경이나 마우스 오른쪽 클릭이 가능한 것

// 브라우저의 기본 동작

const link = document.querySelector('#link');
const checkbox = document.querySelector('#checkbox');
const input = document.querySelector('#input');
const text = document.querySelector('#text');

// 링크 클릭을 막는 동작
link.addEventListener('click', function(e) {
e.preventDefault();
alert('지금은 이동할 수 없습니다.');
});

// 체크박스에 체크가 되어 있어야 input에 입력이 가능

input.addEventListener('keydown', function(e) {
if (!checkbox.checked) {
e.preventDefault();
alert('체크박스를 먼저 체크해 주세요.');
}
});

// 마우스오른쪽 클릭을 막는다. document를 text로 치면 text에만 오른쪽 클릭이 불가
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
alert('마우스 오른쪽 클릭은 사용할 수 없습니다.');
});