Achievement Goals
-
기초적인 event를 알고, event handler를 element에 적용할 수 있다
-
onclick event
-
onclick 에 직접 할당하는 것과 addEventListener의 차이
-
eventHandler 함수를 만들고, eventHandler의 첫번째 인자를 사용할 줄 안다.
-
이벤트 객체란?
사용자가 버튼을 클릭하면, 그 버튼의 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>
<input type = 'text' placeholder="여기에 입력하세요.">
<button class = 'find'>메뉴검색</button>
<script>
let menus = document.querySelectorAll("button"); //
먼저 HTML의 두개의 버튼에 해당하는 변수를 DOM 메소드 querySelectorAll를 통해 javascript에 지정해주었다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
} // 선언식 표현법
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
</script>
</body>
</html>
- 함수에 대해서 수정하면서 함수에 인자로 이벤트 객체가 있든지 없든지 같은 결과 값이 같이 나온다는 것을 알았다.
< 함수에 인자로 이벤트 객체가 있는경우>
function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
} // 선언식 표현법
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; //
< 함수에 인자로 이벤트 객체가 없는 경우>
function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
} // 선언식 표현법
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 그래서 관련해서 찾아보는중 같은 질문을 하는 분이 계셔셔 참고하였다.
<질문>
<답변>
- onclick 이벤트 함수를 이용해 표현하는 다른 방법
<script>
<script>
let menus = document.querySelectorAll("button"); //
먼저 HTML의 두개의 버튼에 해당하는 변수를 DOM 메소드 querySelectorAll를 통해 javascript에 지정해주었다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
btnAmericano.onclick =function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnCaffelatte.onclick = function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
} // 표현식 표현법
</script>- addEventListener() vs onclick() in javascript
자바스크립트에서 클릭 이벤트를 줄 때 어떤 방식을 사용하는가?
대표적인 것이 addEventListener() / onclick() 이 두가지 입니다.
둘의 차이점은 ?
onclick은 하나만, addEventListener는 여러 개를.
onclick에는 하나의 콜백만 지정가능.
addEventListener를 사용하면 여러 개의 이벤트 리스너를 추가할 수 있다.
따라서 만약 onclick 이벤트 핸들러를 두 번 이상 사용한다면, 기존 이벤트 핸들러를 덮어쓰기 때문에 가장 아래에 추가한 핸들러만 제대로 작동한다. < 오직 한개 맨 아래에 설정된 onclick event만 실행됩니다>
addEventListener는 기존 이벤트 핸들러를 덮어 쓰지 않고 얼마든지 계속해서 핸들러를 추가해도 모든 핸들러가 정상적으로 작동한다.
let btn = document.querySelectorAll('button');
btn.onclick = function() {
alert('onclick-1');
}
btn.onclick = function() {
alert('onclick-2');
}
btn.addEventListener('click', function() {
alert('addEventListener-1');
});
btn.addEventListener('click', function() {
alert('addEventListener-2');
});onclick-2만 작동하고 addEventListener-1 / -2 둘다 작동한다.
그렇다면, onclick이 왜 있는걸까?
onclick은 초기 DOM Level-0에서 제공하던 기능이고, 그 이후 버전인 Level-2에서 추가된 것이 addEventListener이다.
addEventListener는 이벤트 캡쳐링, 버블링 같은 이벤트 방식을 설정할 수 있기 때문에 이벤트 제어에 있어서 더욱 유용하지만, addEventListener는 IE8 이하에서는 작동을 하지 않는다. 그래서 구형 브라우저 지원이 필요하면 onclick을 사용하거나 다른 방법을 찾아야 한다.
- 질문
Q) event 객체에는 어떤 내용이 출력되나요?
function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event
console.dir(event)
}
Q) event.target은 어떤 값을 담고 있나요?
function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target
console.dir(event.target)
}
-> 여전히 콘솔창에는 객체가 나오는데, 아래에 찾아보면 textContent에 있는것을 볼수 있습니다.
Q) '아메리카노', '카페라떼'라는 문자열은 어디에 담겨있나요?
function handleClick(event) {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.textContent
console.dir(event.target.textContent)
}
textContent에 있습니다.
출처:
(1) 코드스테이츠
(2) https://jess2.github.io/2018/05/15/JavaScript/JS-onclick%EA%B3%BC-addEventListener-%EB%B9%84%EA%B5%90/
(3) https://velog.io/@22soook00/06.-02-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EA%B0%9D%EC%B2%B4
