javascript 이벤트 핸들링 (Event Handling)
JavaScript에서 이벤트 핸들링은 웹 페이지에서 사용자 상호작용에 응답하기 위해 이벤트를 감지하고 처리하는 프로세스입니다. HTML 요소에서 발생하는 이벤트(예: 클릭, 입력, 마우스 이동 등)에 대응하여 특정 동작이나 함수를 실행할 수 있습니다.
이벤트 핸들링에는 여러 가지 방법이 있습니다. 아래는 간단한 예제를 통해 이벤트 핸들링을 설명합니다.
HTML에서 이벤트 핸들러 등록:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// HTML 요소에 직접 이벤트 핸들러 등록
document.getElementById('myButton').onclick = function() {
alert('Button clicked!');
};
</script>
</body>
</html>JavaScript에서 이벤트 핸들러 등록:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// JavaScript로 이벤트 핸들러 등록
const button = document.getElementById('myButton');
function handleClick() {
alert('Button clicked!');
}
button.addEventListener('click', handleClick);
</script>
</body>
</html>이벤트 핸들링의 주요 단계는 다음과 같습니다:
1. 이벤트 대상 식별:
이벤트 대상을 식별하는 방법은 HTML 요소에 접근하여 해당 요소를 선택하는 것입니다. 이를 위해 document.getElementById와 document.querySelector 등의 메서드를 사용할 수 있습니다. 아래는 간단한 예제를 통해 이벤트 대상을 식별하는 방법을 보여줍니다:
2. 이벤트 핸들러 함수 작성:
이벤트 핸들러 함수는 이벤트가 발생했을 때 실행될 코드 블록을 정의하는 함수입니다. 이 함수는 이벤트 핸들러 등록 시 실행될 동작을 담당하며, 사용자의 상호작용에 대한 응답으로 실행됩니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handler Function</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// 이벤트 대상 식별
const button = document.getElementById('myButton');
// 이벤트 핸들러 함수
function handleClick() {
alert('Button clicked!');
}
// 이벤트 핸들러 등록
button.addEventListener('click', handleClick);
</script>
</body>
</html>위의 코드에서 handleClick 함수가 이벤트 핸들러 함수입니다. 이 함수는 버튼이 클릭되면 실행됩니다. 여기서 handleClick 함수는 간단한 alert 창을 띄우는 동작을 수행하도록 작성되었습니다. 실제로는 더 복잡한 로직이나 다양한 동작을 수행할 수 있습니다.
3. 이벤트 핸들러 등록:
이벤트 핸들러를 등록하는 과정은 이벤트 대상을 식별한 후 해당 대상에 대해 addEventListener 메서드를 사용하여 이벤트 핸들러 함수를 등록하는 것입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handler Registration</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// 이벤트 대상 식별
const button = document.getElementById('myButton');
// 이벤트 핸들러 함수
function handleClick() {
alert('Button clicked!');
}
// 이벤트 핸들러 등록
button.addEventListener('click', handleClick);
</script>
</body>
</html>4. 이벤트 발생 대기:
이벤트 발생 대기는 사용자가 특정 동작을 수행할 때까지 코드 실행을 지연시키는 것을 의미합니다. 이것은 일반적으로 비동기적인 환경에서 사용되며, 사용자의 행동에 반응하여 특정 동작을 수행하고자 할 때 유용합니다.
자바스크립트에서 이벤트 발생 대기는 주로 이벤트 핸들러 함수를 사용하여 구현됩니다. 사용자의 상호작용을 기다리기 위해 주로 버튼 클릭, 키 입력, 마우스 이벤트 등을 사용합니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Waiting</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// 이벤트 대상 식별
const button = document.getElementById('myButton');
// 이벤트 핸들러 함수
function handleClick() {
alert('Button clicked!');
}
// 이벤트 핸들러 등록
button.addEventListener('click', handleClick);
// 이벤트 발생 대기 (예: 일정 시간이 지난 후에 특정 동작 수행)
setTimeout(function() {
// 여기에 원하는 동작을 추가
alert('Delayed action after 3 seconds!');
}, 3000);
</script>
</body>
</html>위의 코드에서 setTimeout 함수를 사용하여 버튼 클릭 이벤트 핸들러를 등록한 후, 3초 뒤에 다른 동작이 실행되도록 하였습니다. setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 실행하게 됩니다.
이벤트 발생 대기는 다양한 상황에서 유용하게 사용될 수 있습니다. 예를 들어, 사용자의 입력을 기다리거나 특정 조건이 충족될 때까지 대기하는 등의 작업에서 활용됩니다.
이벤트 핸들러를 등록함으로써 특정 이벤트에 대한 반응을 정의하고 사용자와 상호작용하는 동적인 웹 애플리케이션을 만들 수 있습니다.
