자바스크립트에서 이벤트 객체(event object)는 특정 타입의 이벤트와 관련이 있는 객체입니다. 이벤트 객체는 객체나 요소에 프로퍼티로 등록할 수 있습니다.
이벤트 객체의 매개변수와 프로퍼티는 다음과 같습니다:
- property Listener: 이벤트 타겟에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 것을 말합니다.
- addEventListener(): 이벤트를 등록하는 가장 권장되는 방법입니다.
자바스크립트에서 클릭 이벤트를 줄 때 대표적으로 사용하는 방법은 addEventListener()입니다.
#onclick onkeyup onscroll
사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있습니다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져옵니다. 다시 말해, 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체입니다.
#onclick
해당 요소가 마우스 클릭되면 실행됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onclick Example</title>
</head>
<body>
<button onclick="handleClick()">Click me</button>
<script>
// JavaScript 코드
function handleClick() {
alert('Button clicked!');
}
</script>
</body>
</html>
#onkeyup
해당 요소에서 키를 눌렀다 놓을 때 실행됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onkeyup Example</title>
</head>
<body>
<input type="text" onkeyup="handleKeyup(event)" placeholder="Type something...">
<script>
// JavaScript 코드
function handleKeyup(event) {
// event 객체를 통해 눌린 키의 정보에 접근 가능
console.log('Key pressed:', event.key);
// 입력된 텍스트를 얻기 위해 value 속성 사용
const inputValue = event.target.value;
console.log('Input value:', inputValue);
}
</script>
</body>
</html>
#onscroll
요소가 스크롤될 때 발생하는 이벤트입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onscroll Example</title>
<style>
/* 추가적인 스타일링을 위한 CSS */
body {
height: 1500px; /* 스크롤이 가능한 높이로 설정 */
}
#scrollIndicator {
position: fixed;
top: 10px;
left: 10px;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body onscroll="handleScroll()">
<div id="scrollIndicator">Scrolled: 0px</div>
<script>
// JavaScript 코드
function handleScroll() {
// 현재 스크롤 위치 얻기
const scrolledPosition = window.scrollY;
// 스크롤 위치를 표시하는 요소 업데이트
const scrollIndicator = document.getElementById('scrollIndicator');
scrollIndicator.textContent = `Scrolled: ${scrolledPosition}px`;
}
</script>
</body>
</html>
