HTML에서 이벤트 핸들러를 어트리뷰트 방식으로 등록할 때, 반드시 호출문의 인자로 event를 넣어줘야 한다는 사실에 대해 들어보신 적이 있나요? 이번 글에서는 그 이유를 자세히 설명하겠습니다.
이벤트 객체(event object)란?
브라우저는 이벤트가 발생할 때마다 해당 이벤트와 관련된 다양한 정보를 담고 있는 이벤트 객체(event object)를 생성합니다. 이 객체는 이벤트가 발생한 요소, 이벤트 타입, 마우스 좌표, 키보드 입력 등 다양한 정보를 포함하고 있습니다.
어트리뷰트 방식으로 이벤트 핸들러 등록하기
어트리뷰트 방식으로 이벤트 핸들러를 등록하는 것은 HTML 요소의 속성(attribute)에 직접 이벤트 핸들러 코드를 작성하는 것을 의미합니다. 예를 들어, 다음과 같이 작성할 수 있습니다:
<button onclick="myFunction()">Click me</button>위 코드에서 onclick 속성에 myFunction()이라는 함수 호출이 직접 작성되어 있습니다.
왜 'event'를 반드시 사용해야 할까?
1. 'event'는 예약된 객체이다
브라우저 환경에서 HTML 어트리뷰트 방식으로 이벤트 핸들러를 정의할 때, event라는 이름은 브라우저가 자동으로 생성하여 핸들러에 전달하는 객체를 가리킵니다. 이 객체는 이벤트에 관한 다양한 정보를 담고 있습니다.
<button onclick="myFunction(event)">Click me</button>위 코드에서 event는 브라우저가 자동으로 전달하는 특별한 객체이므로 별도의 정의 없이도 사용할 수 있습니다.
2. 다른 이름 사용의 제약
다른 이름을 사용할 수 없는 이유는 브라우저가 자동으로 전달하는 이벤트 객체의 이름이 event로 고정되어 있기 때문입니다. 만약 event 대신 다른 이름을 사용하려면 JavaScript 코드 내에서 별도의 처리가 필요합니다.
<button onclick="myFunction(e)">Click me</button> <!-- 오류 발생 -->위 코드는 제대로 동작하지 않습니다.
3. JavaScript 코드 내에서의 변경
물론 JavaScript 코드 내에서 이벤트 객체를 다른 이름으로 사용할 수 있습니다. 예를 들어:
<button onclick="myFunction(event)">Click me</button>
<script>
function myFunction(event) {
// 이벤트 객체를 다른 변수에 할당
var e = event;
console.log(e.target.id);
}
</script>위와 같이 함수 내에서 이벤트 객체를 다른 변수에 할당하여 사용할 수는 있지만, HTML 어트리뷰트 방식으로 등록할 때는 반드시 event라는 이름을 사용해야 합니다.
4. HTML 어트리뷰트 방식의 제한
HTML 어트리뷰트 방식으로 이벤트 핸들러를 정의할 때는 JavaScript의 범위(scope)와 다르게 동작합니다. 브라우저는 HTML 어트리뷰트에 정의된 코드가 실행될 때 event라는 특별한 객체를 자동으로 전달합니다. 따라서 다른 이름을 사용할 수 있는 유연성은 없습니다.
JavaScript 코드 내에서 이벤트 핸들러 등록하기
반면, JavaScript 코드 내에서 이벤트 핸들러를 등록할 때는 이벤트 객체를 다른 이름으로 사용할 수 있습니다. 보통 e나 evt 같은 이름을 많이 사용합니다. 이는 개발자가 자유롭게 이름을 정할 수 있기 때문입니다. 예를 들어, 다음과 같이 작성할 수 있습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Example</title>
<script>
function myFunction(e) {
// 이벤트 객체를 활용하여 클릭된 요소의 ID를 출력
console.log("Clicked button ID:", e.target.id);
}
window.onload = function() {
document.getElementById("btn1").addEventListener("click", myFunction);
document.getElementById("btn2").addEventListener("click", myFunction);
};
</script>
</head>
<body>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
</body>
</html>위 코드에서 addEventListener 메서드를 사용하여 이벤트 핸들러를 등록했습니다. 이 경우, 이벤트 객체의 이름은 함수의 인자로 전달되는 이름(e)에 따라 결정됩니다.
결론
HTML 어트리뷰트 방식으로 이벤트 핸들러를 등록할 때는 event라는 이름이 브라우저에서 자동으로 전달되는 특별한 객체이기 때문에 반드시 event라는 이름을 사용해야 합니다. 다른 이름을 사용하려면 JavaScript 코드 내에서 별도로 이벤트 객체를 처리해야 합니다. HTML 어트리뷰트 방식 자체의 제약 때문에 event 이외의 다른 이름을 직접 사용할 수는 없습니다.
반면, JavaScript 코드 내에서 이벤트 핸들러를 등록할 때는 이벤트 객체의 이름을 자유롭게 지정할 수 있습니다 (e, evt 등). 이 두 방식의 차이를 이해하면, 각 방식의 제약과 자유도를 더 잘 활용할 수 있습니다.
이 글이 HTML 어트리뷰트 방식으로 이벤트 핸들러를 등록할 때 event를 반드시 사용해야 하는 이유를 이해하는 데 도움이 되었길 바랍니다.
