JS LAB
    JS 4.5 · 4부. 브라우저와 DOM

    이벤트 다루기

    addEventListener 로 클릭과 입력에 반응합니다.

    예상 학습 시간 15분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 초급
    개념 설명

    사용자가 무언가 할 때 실행합니다

    여기까지의 코드는 실행하면 위에서 아래로 한 번 돌고 끝났습니다. 이제 사용자가 누르거나 입력할 때 실행되는 코드를 붙입니다.

    addEventListener 에 무슨 일과 할 일을 넘깁니다. 할 일은 함수입니다 — 2.6 의 콜백입니다.

    모양 
    요소.addEventListener("click", () => {
	할 일
});
    최소 예제 · 편집 가능

    누르면 화면이 바뀝니다

    아래 예제는 마지막 줄에서 코드로 한 번 눌러 결과를 바로 보여 줍니다. 실행한 뒤 미리보기 탭에서 직접 눌러 보세요. 누를 때마다 숫자가 올라갑니다.

    script.js 
    const btn = document.querySelector("#btn");
const msg = document.querySelector("#msg");

let count = 0;

btn.addEventListener("click", () => {
	count++;
	msg.textContent = `${count}번 눌렀습니다`;
});

btn.click();
console.log(msg.textContent);
    출력
    1번 눌렀습니다

    count 가 함수 밖에 있는데 안에서 계속 늘어납니다. 2.5 에서 본 클로저입니다.

    출력 칸은 실행할 때 한 번만 채워집니다. 미리보기에서 눌러 본 결과는 출력 칸이 아니라 화면에 나타납니다.

    상세 사용법

    이벤트 객체

    넘긴 함수는 무슨 일이 있었는지 담은 객체를 하나 받습니다. 어디를 눌렀는지, 무엇을 입력했는지가 여기 들어 있습니다.

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

btn.addEventListener("click", event => {
	console.log(event.type);
	console.log(event.target.tagName);
	console.log(event.target.dataset.name);
});

btn.click();
    출력
    click BUTTON 구매 단추

    event.target 은 실제로 그 일이 일어난 요소 입니다. 4.7 의 위임에서 이것을 그대로 사용합니다.

    상세 사용법

    입력에 반응하기

    script.js 
    const input = document.querySelector("#name");
const echo = document.querySelector("#echo");

input.addEventListener("input", event => {
	echo.textContent = event.target.value;
});

input.value = "홍길동";
input.dispatchEvent(new Event("input"));

console.log(echo.textContent);
    출력
    홍길동

    input 은 글자가 바뀔 때마다 일어납니다. 마지막 두 줄은 사람이 입력한 것처럼 코드로 흉내 낸 것입니다. 미리보기에서 직접 입력해 보세요.

    상세 사용법

    기본 동작 막기

    링크를 누르면 이동하고, 폼을 보내면 화면이 새로 뜹니다. 그것을 막고 내가 정한 일만 하게 하려면 preventDefault 를 부릅니다.

    script.js 
    const link = document.querySelector("#link");
const log = document.querySelector("#log");

link.addEventListener("click", event => {
	event.preventDefault();
	log.textContent = "이동을 막았습니다";
});

link.click();
console.log(log.textContent);
    출력
    이동을 막았습니다
    상세 사용법

    자주 사용하는 이벤트

    • click — 눌렀을 때
    • input — 입력 칸의 글자가 바뀔 때마다
    • change — 다 입력하고 칸을 벗어났을 때
    • submit — 폼을 보낼 때 (4.7)
    • keydown — 자판을 눌렀을 때
    흔한 실수

    처음에 자주 걸리는 것

    1. 함수에 괄호를 붙여 넘깁니다

    2.6 에서 본 것과 같습니다. 괄호를 붙이면 그 자리에서 실행되고, 돌려준 값이 넘어갑니다. 넘길 때는 괄호 없이 이름만 적습니다. 

    btn.addEventListener("click", handleClick());   // 지금 실행됩니다
btn.addEventListener("click", handleClick);     // 이렇게 적습니다
    2. 이벤트 이름에 on 을 붙입니다

    "onclick" 이 아니라 "click" 입니다. 오류가 나지 않고 그냥 아무 일도 일어나지 않습니다.

    3. 없는 요소에 붙입니다

    querySelector 가 null 을 돌려줬는데 이어서 붙이면 오류가 납니다(4.2). 

    TypeError: Cannot read properties of null (reading 'addEventListener')
    실습 문제

    직접 해보기

    1. 눌러서 켜고 끄기 난이도 하

    단추를 누를 때마다 #msg 에 active class 를 붙였다 뗐다 하세요(4.4).

    const btn = document.querySelector("#btn"); const msg = document.querySelector("#msg"); btn.addEventListener("click", () => { const on = msg.classList.toggle("active"); msg.textContent = on ? "켜짐" : "꺼짐"; }); btn.click(); console.log(msg.textContent);
    2. 글자 수 세기 난이도 중

    입력 칸에 글자를 넣을 때마다 5 / 20 형태로 글자 수를 보여 주세요. 20자를 넘으면 over class 를 붙입니다.

    const input = document.querySelector("#name"); const echo = document.querySelector("#echo"); input.addEventListener("input", event => { const length = event.target.value.length; echo.textContent = `${length} / 20`; echo.classList.toggle("over", length > 20); }); input.value = "홍길동"; input.dispatchEvent(new Event("input")); console.log(echo.textContent);
    요약

    이 단원의 정리

    • addEventListener 에 이벤트 이름과 할 일을 넘깁니다.
    • 넘길 함수에는 괄호를 붙이지 않습니다.
    • 이벤트 이름에 on 을 붙이지 않습니다.
    • 넘긴 함수는 이벤트 객체를 받습니다. event.target 이 그 일이 일어난 요소입니다.
    • preventDefault 로 기본 동작을 막습니다.