Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 타임스탬프
- 암호화폐 거래소
- 클라우드 서비스
- 반복문
- HTML
- 탈중앙화 시스템
- 함수
- 알트코인
- 파이썬
- Codeup
- 변수
- 논리 회로
- 메서드
- 모듈
- 블록체인
- 컴퓨터 구조
- UTXO
- 작업 증명 알고리즘
- 중앙 집중형 시스템
- 숫자형
- Baekjoon
- CSS
- 익명 암호화폐
- 블록체인2.0
- 문자형
- 콜백 지옥
- 이벤트 리스너
- 나카모토 합의
- 꾸밈 주소
- 블록 체인
Archives
- Today
- Total
과제 블로그
자바스크립트 document 객체 본문
웹 페이지를 개발하다 보면 사용자와 상호작용하는 부분에서 다양한 이벤트가 발생합니다. 이벤트는 사용자가 웹페이지가 아닌 브라우저의 UI, 키보드, 마우스, 그리고 요소의 포커스와 관련하여 발생할 수 있습니다. 이번 포스팅에서는 주요 이벤트 타입과 간단한 예시 코드를 살펴보겠습니다.
- UI 이벤트 - load
웹페이지 로드가 완료되었을 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.
window.addEventListener('load', function() {
alert('페이지 로드가 완료되었습니다!');
});
- 키보드 이벤트 - keydown
사용자가 키보드를 처음 눌렀을 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.
document.getElementById('myInput').addEventListener('keydown', function(event) {
console.log('Key pressed:', event.key);
});
- 마우스 이벤트 - click
사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.
document.getElementById('myButton').addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
- 포커스 이벤트 - focus, blur
요소가 포커스를 얻거나 잃을 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.
document.getElementById('myInput').addEventListener('focus', function() {
console.log('Input 요소가 포커스를 얻었습니다!');
});
document.getElementById('myInput').addEventListener('blur', function() {
console.log('Input 요소가 포커스를 잃었습니다!');
});