Unit 11
이벤트 객체
이벤트 객체란?
사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있다. 다시 말해, 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다.
아래의 예를 통해 이벤트 객체를 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>이벤트 객체</title>
</head>
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script>
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
</script>
</body>
</html>자바스크립트 부분을 보면 어떤 메뉴가 추가되더라도, 하나의 함수를 추가하면 되고, 함수를 여러번 사용 가능하다.
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // for 문으로도 충분히 구현할 수 있는 내용입니다.
function handleClick() {
// 아래의 빈칸(____)을 채우세요.
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}addEventListener() vs onclick()
자바스크립트에서 클릭 이벤트를 줄 때 이 두가지 방식이 사용된다.
둘의 차이점은 onclick()은 하나의 콜백만 저장가능 하지만, addEventListener()를 사용하면 여러 개의 이벤트리스너를 추가할 수 있다.
onclick은 초기 DOM Level-0에서 제공하던 기능이고, 그 이후 버전인 Level-2에서 추가된 것이 addEventListener이라고 한다. addEventListener는 IE8이하에서는 작동하지 않는다. 그러므고 구형 브라우저 지원이 필요시 onclick을 사용하거나 다른 방법을 찾아야 한다.
