이벤트란 웹페이지에서 사용자와 상호작용을 할 때 발생하는 사건 또는 신호를 말합니다. 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 입력하면 해당 이벤트가 발생하고 이벤트 핸들러 함수를 실행하여 특정 동작을 수행하도록 합니다.
이벤트 핸들러란 DOM 요소에 발생하는 이벤트(ex: 클릭, 마우스 오버 등)를 처리하기 위한 함수입니다. 이벤트 핸들러를 등록하여 해당 이벤트가 발생했을 때 실행되도록 할 수 있습니다.
HTML에서 버튼을 만들면, 브라우저는 사용자의 마우스 동작에 대한 이벤트를 계속해서 추적하고 있습니다. 사용자가 버튼 위를 마우스로 지나가거나 클릭했을 경우, 이벤트가 발생하게 됩니다.
우리는 이러한 이벤트를 적절한 핸들러 함수를 등록하여 사용자의 행동에 대한 반응을 정의할 수 있습니다. addEventListener() 메서드를 사용하여 이벤트 핸들러 함수를 등록합니다.
사용자가 마우스를 클릭한경우 발생한 click 이벤트에 대한 핸들러 함수를 등록하고 싶은 경우에는 다음과 같이 작성합니다.
HTML에서 직접 등록하기
<button onclick="handleClick()">Click me</button>
JavaScript에서 등록하기
<button id="myButton">Click me</button>
<script>
// document.getElementById() 메소드를 사용하여
//DOM에 있는 Element들중에 id 속성이 'myButton'인 요소를 찾아
//변수 button에 할당하는 코드입니다.
//변수 button의 유형은 Element입니다.
const button = document.getElementById('myButton');
//addEventListener() 메소드는 요소에 이벤트를 추가하기 위해 사용됩니다.
//첫번째 인자로 등록하고자 하는 이벤트의 이름을,
//두번째 인자로 해당 이벤트가 발생했을 때 실행할 콜백 함수를 전달합니다.
button.addEventListener('click', handleClick);
function handleClick() {
alert('안녕');
}
</script>
EventTarget.addEventListener() - Web API | MDN (mozilla.org)
브라우저에서 자주 사용되는 이벤트 객체에는 다음과 같은 것들이 있습니다:
MouseEvent : 마우스와 관련된 이벤트를 처리하기 위한 객체입니다.
KeyboardEvent : 키보드와 관련된 이벤트를 처리하기 위한 객체입니다.
TouchEvent : 터치와 관련된 이벤트를 처리하기 위한 객체입니다.
DragEvent : 드래그와 관련된 이벤트를 처리하기 위한 객체입니다.
FocusEvent : 포커스와 관련된 이벤트를 처리하기 위한 객체입니다.
WheelEvent : 마우스 휠 이벤트를 처리하기 위한 객체입니다.
Event : 위의 객체들을 포함하는 기본 이벤트 객체입니다. 이벤트의 타입, 발생한 요소 등의 정보를 제공합니다.
각 객체별 주요 이벤트와 addEventListener() 예제는 다음과 같습니다.
MouseEvent:
click: 사람이 버튼이나, 테이블, 혹은 메뉴가들어있는 ul등을 클릭했을때 발생하고, 이벤트를 처리하고 싶은 객체를 찾아 처리함수를 등록합니다.
const element = document.getElementById('myElement');
element.addEventListener('click', () => {
console.log('Element clicked');
});
KeyboardEvent:
keydown: 사용자가 로그인 하기위해 아이디를 input 요소에 입력하는등의 키를 눌렀을 때 발생하는 이벤트입니다.
const input = document.getElementById('myInput');
input.addEventListener('keydown', (event) => {
console.log(`Key pressed: ${event.key}`);
});
TouchEvent:
touchstart: 사용자가 화면을 터치할때 터치된 요소에 발생하는 이벤트입니다.
const element = document.getElementById('myElement');
element.addEventListener('touchstart', () => {
console.log('Touch started');
});
dragstart: 드래그 작업이 시작될 때 발생하는 이벤트입니다.
element.addEventListener('dragstart', () => {
focus: 요소가 포커스를 받았을 때 발생하는 이벤트입니다
input.addEventListener('focus', () => {
wheel: 마우스 휠을 움직였을 때 발생하는 이벤트입니다.
element.addEventListener('wheel', (event) => {
DOM객체별 발생하는 이벤트 정보