JavaScript에서 한 함수에서 다른 함수로 이벤트 객체를 전달하는 방법

JavaScript에서 이벤트 핸들러 함수가 호출되면, 브라우저는 자동으로 이벤트 객체(event object)를 첫 번째 매개변수로 전달합니다. 이 객체 안에는 발생한 이벤트의 유형, 이벤트가 발생한 대상 요소(event.target) 등 유용한 정보가 담겨 있습니다.

한 함수에서 받은 이벤트 객체를 다른 함수로 전달하는 방법은 매우 간단합니다. 새로운 함수를 호출할 때 인자(argument)로 이벤트 객체를 그대로 넘겨주면 됩니다. 아래 예제에서는 버튼 클릭 시 changeFont() 함수가 이벤트 객체를 받아 폰트 크기를 변경한 뒤, 동일한 이벤트 객체를 changeColor() 함수에 전달하여 글자 색상까지 함께 변경합니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>Pass event objects from one function to another in JavaScript</h1>
<button class="Btn" onclick="changeFont(event)">CLICK HERE</button>
<h3>Click the above button to change its font size and color</h3>
<script>
    function changeFont(event) {
        event.target.style.fontSize = "32px";
        changeColor(event);
    }
    function changeColor(event) {
        event.target.style.color = "red";
    }
</script>
</body>
</html>

코드 설명

버튼의 onclick 속성에서 changeFont(event)를 호출하며, 여기서 event는 클릭 이벤트 객체입니다.
changeFont() 함수는 event.target(클릭된 버튼)의 글꼴 크기를 32px로 설정합니다.
이후 changeColor(event)를 호출하면서 같은 이벤트 객체를 인자로 전달합니다.
changeColor() 함수는 전달받은 이벤트 객체를 사용해 버튼의 글자 색상을 빨간색으로 변경합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 표시됩니다.

JavaScript에서 한 함수에서 다른 함수로 이벤트 객체를 전달하는 방법

'CLICK HERE' 버튼을 클릭하면 버튼의 글꼴 크기가 32px로 커지고, 글자 색상이 빨간색으로 변경됩니다.