6장 이벤트와 이벤트처리기

moono·2023년 2월 2일

목록 보기

3/3

🏁 이벤트

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생 시킨다.
만약 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임하고
이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러
이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라고 한다.

📌 이벤트 종류

문서로딩 : abort, error, load, resize, scroll, unload
마우스 : click, dblclick, mousedown, mousemove, mouseover, mouseout, mouseup
키보드 : keydown, keypress, keyup
폼(Form) : blur, change, focus, reset, submit
포커스 : focus, blur, focusin, focusout
값 변경 : input, change, readystatechange

🏁 이벤트 핸들러

이벤트가 발생했을 때 브라우저에 호출을 위임한 함수
⇒ 이벤트가 발생하면 브라우저에 의해 호출될 함수

1️⃣ 이벤트 핸들러 어트리뷰트 방식(HTML 태그에 함수 연결)

가장 간단한 방법으로 이벤트가 발생한 HTML 태그에 직접 함수를 연결하는 방법
on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐
⇒ 스크립트 소스에서 함수 이름이 바뀌거나 변경 내용이 있으면 HTML 소스도 수정이 필요하다.
⇒ 동일한 이벤트 한개 이상 등록 불가능
<태그 on이벤트명 = "함수명"></태그>
****
<button onclick="sayHi('Lee')">Click me</button>

2️⃣ 이벤트 핸들러 프로퍼티 방식

이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 어트리뷰트와 마찬가지로 onclick 같이 on 접두사와 이벤트 종류를 나타내는 이벤트 타입으로 이루어져 있는데,
이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
⇒ 이벤트를 발생시킬 객체인 이벤트 타깃, 이벤트의 종류를 나타내는 문자열 이벤트 타입, 이벤트 핸들러
⇒ 동일한 이벤트 한개 이상 등록 불가능
$button.onclick = function() {
  console.log('button click')
}
⇒ button : 이벤트 타겟
⇒ onclick : on + 이벤트 타입
⇒ function : 이벤트 핸들러

3️⃣ addEventListener 메서드 방식

DOM Level2 에서 도입된 EventTarget.prototype.addEventListener 메서드 사용
⇒ 동일한 이벤트 한개 이상 등록 가능, 등록 순서대로 호출
요소.addEventListener(이벤트, 함수, 캡처 여부)
⇒ 요소 : 이벤트가 발생하는 요소, 이벤트 타겟
⇒ 이벤트 : 이벤트 유형. 단 이벤트 이름 앞에 on 붙이지 않고 이벤트 이름 그대로 사용
⇒ 함수 : 이벤트가 발생했을 때 실행할 함수를 지정, 이벤트 핸들러
⇒ 캡처 여부 : 이벤트 캡처링을 하는지의 여부 지정, default 는 false이며, false 는 버블링을 한다는 의미, true 는 캡쳐링
$button.addEventListener('click', function () {
  console.log('button click');
})

🏷️ 텍스트 필드에 입력한 글자 수 알아내기

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  const word = document.querySelector('#word').value; // txt 필드 내용
  const res = document.querySelector('#result') // 결과값 표시 영역
  let count = word.length; // 문자열 길이
  
  res.innerText = `&{count}`; // 결과값 표시
});

🏷️ 모달 박스 만들기

const open = document.querySelector("#open");
const modalBox = document.querySelector("#modal-box");
const close = document.querySelector("#close");

open.addEventListener("click", () => {
  modalBox.classList.toggle("active"); // 클릭하면 .active 스타일을 토글한다.
});

🏁 이벤트 객체

이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성되며,
생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

이벤트 객체에는 이벤트 이름이나 발생 위치, 발생 시간 등 이벤트와 관련된 다양한 정보가 포함되어 있어서 자바스크립트에서 이벤트를 처리할 때는 event 객체를 자주 사용한다.

➰ event 객체의 프로퍼티(객체에 담긴 정보)

button : 마우스 키 값을 반환
target : 이벤트가 발생한 대상 반환
timeStamp : 이벤트가 발생한 시간을 밀리초 단위로 반환
type : 발생한 이벤트 이름을 반환
which : 키보드와 관련된 이벤트 발생했을 때 키의 유니코드 값 반환
그 외 다양하게 많음

🏷️ 키보드 이벤트에서 키 값 알아내기
e.code 는 키 코드 : KeyA, Digit6
e.key 는 키 이름 : a, 6

const body = document.body;
const res = document.querySelector("#result");

body.addEventListener("keydown", (e) => {
  res.innerText = `
    code : ${e.code},
    key : ${e.key}
    `;    
});