이벤트란
이벤트(Event)는 웹 페이지에서 발생하는 특정한 동작을 말한다. 이벤트는 사용자의 동작에 의해 발생하는 것이 가장 일반적이지만, 웹 페이지 자체, 예를 들어 페이지 로드 완료, 이미지 로드 완료, 폼 유효성 검사 실패 등에 의해서도 발생할 수 있다.
이벤트 객체
이벤트 객체는 특정 이벤트가 발생했을 때 그에 관한 정보를 담고 있는 객체이다. 이벤트 객체는 이벤트의 종류, 발생 위치, 발생 시간 등 다양한 정보를 제공한다. 또한 이벤트 객체는 이벤트 전파 제어, 기본 동작 취소 등의 메소드를 제공하여 이벤트 핸들링에 유연성을 제공한다.
이벤트 객체의 속성
다음은 이벤트 객체가 가질 수 있는 주요 속성들이다:
type: 이벤트의 종류를 나타낸다. 예를 들어, 클릭 이벤트의 경우 'click'라는 값을 가진다.target: 이벤트가 발생한 대상 요소를 가리킨다.currentTarget: 현재 이벤트가 진행 중인 요소를 가리킨다. 이벤트 버블링이나 캡처링 과정에서 현재 처리 중인 요소를 가리킨다.eventPhase: 이벤트가 현재 어느 단계에 있는지 나타낸다. 캡처링, 타겟, 버블링 단계를 가리킨다.bubbles: 이벤트가 버블링 단계를 가지는지의 여부를 나타낸다.cancelable: 이벤트의 기본 동작이 취소될 수 있는지의 여부를 나타낸다.
이벤트 객체의 메소드
이벤트 객체는 여러 메소드를 제공하여 이벤트의 전파를 제어하거나 기본 동작을 취소하는 등의 작업을 수행할 수 있게 돕는다. 주요 메소드는 다음과 같다:
stopPropagation(): 이벤트의 전파를 중지시킨다. 즉, 이 메소드를 호출하면 이벤트 버블링 또는 캡처링이 중지된다.preventDefault(): 이벤트의 기본 동작을 취소한다. 예를 들어, 링크 클릭 시의 페이지 이동, 폼 제출 시의 페이지 리로드 등의 기본 동작을 취소할 수 있다.
이벤트 객체는 웹 페이지에서 이벤트 핸들링을 수행할 때 중요한 역할을 한다. 이벤트 객체의 속성과 메소드를 이해하고 적절히 활용하면, 복잡한 이벤트 핸들링 작업을 보다 효과적으로 수행할 수 있다.
간단하게 click 이벤트의 이벤트 객체를 살펴보겠습니다.
HTML과 JavaScript 코드는 다음과 같습니다:
<button id="myButton">클릭해보세요</button>
<script>
document.querySelector('#myButton').addEventListener('click', function(event) {
console.log(event);
});
</script>위의 코드에서 addEventListener를 이용하여 버튼에 클릭 이벤트를 설정했습니다. 이벤트 핸들러는 이벤트 객체를 인수로 받아 콘솔에 로그를 출력합니다.
이제 사용자가 버튼을 클릭하면 다음과 비슷한 정보를 콘솔에서 확인할 수 있습니다:
MouseEvent {
bubbles: true,
cancelable: true,
currentTarget: null,
defaultPrevented: false,
detail: 1,
eventPhase: 0,
isTrusted: true,
target: button#myButton,
timeStamp: 1413516262721,
type: "click",
// ... 생략 ...
screenX: 174,
screenY: 191,
clientX: 174,
clientY: 141,
// ... 생략 ...
}
MouseEvent 객체는 다음과 같은 정보를 포함하고 있습니다:
target: 이벤트를 발생시킨 요소type: 이벤트 타입screenX,screenY: 스크린에서의 마우스 위치clientX,clientY: 브라우저 창에서의 마우스 위치- 등등
이벤트 객체는 이벤트 핸들러 내에서 이벤트에 대한 상세한 정보를 얻는 데 유용하게 사용됩니다.
이벤트 핸들러
이벤트 핸들러는 웹 브라우저에서 발생하는 이벤트를 처리하기 위한 메커니즘이다. 이벤트 핸들러는 사용자의 클릭, 키보드 입력, 마우스 움직임 등 다양한 상호작용에 대응하여 동작을 수행하도록 지정된 코드 블록이다.
이벤트 핸들러란?
이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수 또는 메소드를 말한다. 이벤트 핸들러는 HTML 요소의 속성, DOM 요소의 프로퍼티, addEventListener 메소드 등을 이용하여 설정할 수 있다. 이벤트 핸들러는 발생한 이벤트에 대한 정보를 담고 있는 이벤트 객체를 인수로 받는다.
이벤트 핸들러 설정 방법
이벤트 핸들러는 다음 세 가지 방법으로 설정할 수 있다:
HTML 요소의 속성을 이용한 설정: HTML 요소의 이벤트 핸들러 속성에 JavaScript 코드를 작성하여 이벤트 핸들러를 설정할 수 있다.
<button onclick="alert('클릭 이벤트 발생!')">클릭</button>
DOM 요소의 프로퍼티를 이용한 설정: DOM 요소의 이벤트 핸들러 프로퍼티에 함수를 할당하여 이벤트 핸들러를 설정할 수 있다.
let button = document.querySelector('button');
button.onclick = function() {
alert('클릭 이벤트 발생!');
};addEventListener 메소드를 이용한 설정: addEventListener 메소드를 이용하여 이벤트 핸들러를 설정할 수 있다. 이 방법은 한 요소에 여러 이벤트 핸들러를 설정할 수 있으며, 이벤트 전파 단계를 지정할 수 있다는 장점이 있다.
let button = document.querySelector('button');
button.addEventListener('click', function() {
alert('클릭 이벤트 발생!');
});이벤트 핸들러는 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 중요한 기능이다. 이벤트 핸들러의 작성 방법과 동작 방식을 이해하고 활용하면, 사용자 친화적인 웹 페이지를 구현할 수 있다.
이벤트 타입
addEventListener 에 첫 번째 인자로 들어갈 수 있는 이벤트 타입은 매우 다양하다. 아래는 그 중 일부를 나열한 것이다:
- 마우스 이벤트:
click: 사용자가 포인팅 장치(보통 마우스) 버튼을 클릭했을 때 발생한다.dblclick: 사용자가 마우스 버튼을 빠르게 두 번 클릭했을 때 발생한다.mousedown: 사용자가 마우스 버튼을 눌렀을 때 발생한다.mouseup: 사용자가 마우스 버튼을 놓았을 때 발생한다.mousemove: 마우스가 움직일 때마다 발생한다.mouseover: 마우스 포인터가 요소 위로 이동했을 때 발생한다.mouseout: 마우스 포인터가 요소 밖으로 이동했을 때 발생한다.mouseenter: 마우스 포인터가 요소 위로 이동했을 때 발생하며, 이 이벤트는 버블링되지 않는다.mouseleave: 마우스 포인터가 요소 밖으로 이동했을 때 발생하며, 이 이벤트는 버블링되지 않는다.
- 키보드 이벤트:
keydown: 키보드의 키를 눌렀을 때 발생한다.keyup: 키보드의 키를 놓았을 때 발생한다.keypress: 키보드의 키를 눌렀을 때 발생하며, 특수키는 제외한다.
- 폼 이벤트:
submit: 폼이 제출될 때 발생한다.change: 폼 필드의 값이 변경되었을 때 발생한다.input: 사용자가 입력을 하는 동안에 발생한다.focus: 요소가 포커스를 받았을 때 발생한다.blur: 요소가 포커스를 잃었을 때 발생한다.
- 윈도우 이벤트:
load: 페이지 로딩이 완료되었을 때 발생한다.resize: 브라우저 창 크기가 변경되었을 때 발생한다.scroll: 사용자가 스크롤 했을 때 발생한다.unload: 페이지가 언로드 될 때 발생한다.
이 외에도 다양한 이벤트가 있다. 개발자는 이러한 이벤트를 활용하여 다양한 상호작용을 처리하는 동적인 웹 페이지를 구현할 수 있다.
