자바스크립트 "UI Events API"

JavaScript의 UI Events API는 개발자가 웹 페이지 또는 애플리케이션에서 발생하는 다양한 사용자 인터페이스 관련 이벤트에 응답할 수 있는 방법을 제공합니다. 이러한 이벤트에는 마우스 클릭, 키보드 입력, 터치 상호 작용 등이 포함될 수 있습니다. 다음은 JavaScript에서 UI Events API를 사용하는 방법에 대한 몇 가지 예입니다.

​

1. 마우스 이벤트 처리:

마우스 이벤트는 사용자가 마우스를 사용하여 웹 페이지와 상호 작용할 때 발생합니다. 다음은 버튼의 클릭 이벤트를 처리하는 방법의 예입니다.

​

const button = document.querySelector('button');

​

button.addEventListener('click', () => {

console.log('Button clicked!');

});

​

이 예제에서는 `querySelector()` 메서드를 사용하여 버튼 요소를 선택한 다음 `addEventListener()` 메서드를 사용하여 클릭 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭하면 콜백 함수가 실행되고 "버튼을 클릭했습니다!"라는 메시지가 표시됩니다. 콘솔에 기록됩니다.

​

2. 키보드 이벤트 처리:

키보드 이벤트는 사용자가 키보드를 사용하여 웹 페이지와 상호 작용할 때 발생합니다. 다음은 문서에서 keydown 이벤트를 처리하는 방법의 예입니다.

​

document.addEventListener('keydown', (event) => {

console.log(`Key pressed: ${event.key}`);

});

​

이 예제에서는 문서 객체에 keydown 이벤트 리스너를 추가합니다. 즉, 사용자가 페이지의 아무 곳이나 키를 누를 때마다 이벤트가 발생합니다. 이벤트가 발생하면 콜백 함수가 실행되고 "키를 눌렀습니다: "라는 메시지 뒤에 눌린 키가 콘솔에 기록됩니다.

​

3. 터치 이벤트 처리:

터치 이벤트는 사용자가 스마트폰이나 태블릿과 같은 터치 스크린 장치를 사용하여 웹 페이지와 상호 작용할 때 발생합니다. 다음은 div 요소에서 touchstart 이벤트를 처리하는 방법의 예입니다.

​

const div = document.querySelector('div');

​

div.addEventListener('touchstart', (event) => {

console.log(`Touch started at (${event.touches[0].pageX}, ${event.touches[0].pageY})`);

});

​

이 예에서는 `querySelector()` 메서드를 사용하여 div 요소를 선택한 다음 `addEventListener()` 메서드를 사용하여 touchstart 이벤트 리스너를 추가합니다. 사용자가 요소를 터치하면 콜백 함수가 실행되고 "Touch started at (x, y)" 메시지가 콘솔에 기록됩니다. 여기서 x와 y는 화면의 터치 이벤트 좌표입니다.

​

이는 JavaScript에서 UI Events API를 사용하는 방법에 대한 몇 가지 예일 뿐입니다. 끌어서 놓기 이벤트, 스크롤 이벤트 등과 같이 처리할 수 있는 다른 많은 유형의 이벤트가 있습니다. 공식 문서에서 UI 이벤트 API 및 다양한 이벤트 유형에 대해 자세히 알아볼 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/UI_Events_API