반응형
HTML 요소에 사용자의 행동을 감지해 동작을 연결
- onclick, onchange, onmouseover, addEventListener() 사용
- 하나의 요소에 여러 이벤트를 연결하려면 addEventListener() 사용
이벤트 종류는 아래 페이지에서 확인.
[웹 개발 기초 자바스크립트] 9. Event 종류
웹에서 일어날 수 있는 이벤트는 매우 다양하다. 아래는 자주 사용되는 이벤트의 카테고리와 그에 속하는 일부 이벤트의 예시를 나열한 것이다.UI 이벤트 (User Interface Events)load: 웹 페이지가 완전
velog.io
좀 더 자세히 알아보고 싶으면 아래 페이지로.
https://ko.javascript.info/introduction-browser-events
브라우저 이벤트 소개
ko.javascript.info
예문 - 클릭해서 이미지 바꾸기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body>
<img
id="pic"
src="https://fastly.picsum.photos/id/72/400/300.jpg?hmac=OY5FAvALmJ3b6qqBS_MmLRo0TBrRtDh_iIhVedrfSkc"
/>
<button onclick="changePic()">이미지 바꾸기</button>
</body>
<script>
function changePic() {
document.getElementById('pic').src =
'https://fastly.picsum.photos/id/37/400/300.jpg?hmac=5hodbYONJN06SVH6HfMzwMszOztpo2Ort9Y-P_gFl-0';
}
</script>
</html>
버튼을 누르면 이미지가 바뀐다.
실습 - 버튼 클릭 시 알림창 출력
let btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert("버튼을 클릭했어요!");
});
연습문제 - 버튼을 눌러 이미지를 왔다갔다 하기
1. 함수를 이용하여, 원하는 기능 구현. (버튼을 누를 때마다 이미지가 바뀜)
let toggle = true;
function togglePic() {
const pic = document.getElementById("pic");
if (toggle) {
pic.src = "image2.jpg";
toggle = false;
} else {
pic.src = "image1.jpg";
toggle = true;
}
}
2. 내장된 addEventListener의 속성을 이용하여 togglePic 함수를 쉽게 호출 가능.
let myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", togglePic);
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript #11 (날짜/시간 객체 관련) (0) | 2025.06.25 |
|---|---|
| JavaScript #10 (객체) (0) | 2025.06.25 |
| JavaScript #8 (함수 - 익명/화살표 + 연습문제) (0) | 2025.06.24 |
| JavaScript #7 (함수 - function) (0) | 2025.06.24 |
| JavaScript #6 (반복문 - while, break/continue) (0) | 2025.06.24 |