> 이미지 경로 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-event.html</title>
</head>
<body>
<h1>02-event.html</h1>
<hr>
<h3>다중 요소에 이벤트 부여하기</h3>
<div id="image">
<img id="img" src="" height="200">
</div>
<div id="btns">
<button class="btn" image="image/짱구.png">짱구</button>
<button class="btn" image="image/훈이.png">훈이</button>
<button class="btn" image="image/철수.png">철수</button>
<button class="btn" image="image/유리.png">유리</button>
<button class="btn" image="image/맹구.png">맹구</button>
</div>
<script>
// 이벤트 대상(들)
const btnList = document.querySelectorAll('.btn')
console.log(btnList)
// 이벤트 핸들러(하나)
// 이벤트 핸들러 내부에서 이벤트 대상을 구분하기 위해서 매개변수 event를 받는다
function btnHandler(event) {
console.log(event.target)
const attr = event.target.getAttribute('image')
console.log(attr)
const img = document.getElementById('img')
img.src = attr
}
// 여러 요소에 같은 함수를 연결하기
btnList.forEach(btn => btn.onclick = btnHandler)
</script>
</body>
</html>
Never give up!!