JavaScript - 이벤트에 대한 소개
안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript 이벤트의 세상으로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 여러분을 이 기본 개념으로 안내하게 되어 기쁩니다. 이 개념은 여러분의 웹 페이지에 생명을 불어넣을 것입니다. 그러니 마음에 드는 음료를 마시며 편안하게 앉아, 이제 시작해보겠습니다!
이벤트란 무엇인가요?
상상해보세요, 여러분이 파티(물론, 코딩 파티입니다!)에 있는 것을. 무언가가 일어나는 때마다 - 누군가가 도착하거나, 노래가 시작되거나, 누군가가 음료를 흘리는 것 등 - 그것이 이벤트입니다. JavaScript의 세상에서 이벤트는 비슷하게 작동합니다. 웹 페이지에서 일어나는 것을 JavaScript가 감지하고 반응할 수 있는 일입니다.
이벤트는 다음과 같은 것들에 의해 발생할 수 있습니다:
- 사용자의 동작(버튼을 클릭하거나, 마우스를 움직이는 것)
- 브라우저의 활동(페이지가 로드가 완료되는 것)
- 페이지 요소의 상태 변화
이 개념을 설명하기 위해 간단한 예제를 보여드리겠습니다:
<button id="myButton">Click me!</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>이 예제에서, 버튼을 클릭하면(이벤트) 알림이 뜨는 것(반응)입니다. 마치 "JavaScript야, 이 버튼을 눌렀을 때 이 메시지를 보여줘!"라고 말하는 것과 같습니다.
JavaScript 이벤트 핸들러
이제 이벤트가 무엇인지 이해했으므로, 그들을 어떻게 처리하는지 대해 이야기해보겠습니다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 JavaScript 함수입니다. 그들은 마치 우리 코딩 파티의 보디가드처럼, 각 이벤트가 발생했을 때 무엇이 일어나는지 결정합니다.
JavaScript에서 이벤트 핸들러를 지정하는 여러 가지 방법이 있습니다. 이들을 탐구해보겠습니다:
1. 인라인 이벤트 핸들러
가장 간단한(하지만 항상 최선은 아닙니다) 방법은 다음과 같습니다:
<button onclick="alert('Hello, World!')">Click me</button>여기서, 이벤트 핸들러는 HTML 내에 직접 작성되어 있습니다. 버튼을 클릭하면 알림이 뜹니다. 이 방법은 이해하기 쉽지만, HTML과 JavaScript를 혼합하기 때문에 큰 애플리케이션에서는 일반적으로 권장되지 않습니다.
2. 속성 이벤트 핸들러
더 나은 접근 방법은 JavaScript를 HTML에서 분리하는 것입니다:
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("Hello from property event handler!");
};
</script>이 방법은 버튼 요소의 onclick 속성에 함수를 할당합니다. 이는 깨끗하지만, 한 가지 제한이 있습니다: 이 방법으로는 한 이벤트에 대해 하나의 핸들러만 할당할 수 있습니다.
3. addEventListener() 메서드
가장 유연하고 강력한 방법은 다음과 같습니다:
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Hello from addEventListener!");
});
</script>addEventListener()을 사용하면 다음과 같은 기능을 수행할 수 있습니다:
- 단일 요소에 여러 이벤트 핸들러를 첨부
- 필요에 따라 이벤트 핸들러를 쉽게 제거
- 이벤트 라이프사이클에서 언제 리스너가 활성화되는지 더 많은 제어
더 복잡한 예제를 보여드리겠습니다:
<button id="myButton">Click me</button>
<script>
let button = document.getElementById("myButton");
function changeColor() {
this.style.backgroundColor = "red";
}
function addBorder() {
this.style.border = "2px solid blue";
}
button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>이 예제에서, 버튼을 클릭하면 버튼의 색상이 빨간색으로 변하고 파란색 테두리가 추가됩니다. 하나의 이벤트에 두 개의 핸들러가 있습니다!
JavaScript 이벤트 객체
이벤트가 발생할 때, JavaScript는 이벤트 객체를 생성합니다. 이 객체는 이벤트에 대한 자세한 정보를 포함하고 있습니다. 예를 들어, 이벤트가 어디에서 발생했는지, 이벤트의 유형은 무엇인지, 그리고 종종 해당 이벤트 유형에 특화된 추가 정보 등이 포함됩니다.
다음 예제를 보겠습니다:
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("Event type: " + event.type);
console.log("Target element: " + event.target.tagName);
console.log("Mouse X position: " + event.clientX);
console.log("Mouse Y position: " + event.clientY);
});
</script>버튼을 클릭할 때, 이 스크립트는 클릭 이벤트에 대한 정보를 로그합니다:
- 이벤트의 유형 ("click")
- 클릭된 요소 (BUTTON 요소)
- 클릭 시 마우스의 X 및 Y 좌표
이 정보는 상호작용적이고 반응적인 웹 애플리케이션을 만들기 위해 매우 유용할 수 있습니다.
이벤트 객체의 일부 일반적인 속성을 요약한 표를 아래에 보여드리겠습니다:
| 속성 | 설명 |
|---|---|
| type | 이벤트의 유형 (예: "click", "mouseover") |
| target | 이벤트를 발생시킨 요소 |
| clientX, clientY | 마우스 포인터의 수평 및 수직 좌표 |
| keyCode | 눌린 키의 키 코드 ( 키보드 이벤트에 대해) |
| preventDefault() | 이벤트의 기본 동작을 중지하는 메서드 |
| stopPropagation() | 이벤트가 DOM 트리를 상승하는 것을 중지하는 메서드 |
다양한 이벤트 유형은 추가적인 특정 속성을 가질 수 있습니다. 각 이벤트 유형에 대해 가능한 모든 속성을 확인하려면 문서를 참조하세요.
결론적으로, 이벤트는 상호작용적인 웹 애플리케이션의 중심입니다. 이들은 사용자의 동작에 대한 JavaScript의 반응을 가능하게 하고, 동적인, 흥미로운 경험을 만듭니다. JavaScript 여정을 계속하면서, 여러분은 이벤트를 더 많이 사용하게 될 것입니다. 그들을 받아들이고 실험하고, 여러분의 웹 페이지가 살아나는 것을 지켜보세요!
행복하게 코딩하세요, 미래의 JavaScript ninja들! ??
Credits: Image by storyset