반응형
선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">box</div>
<div id="box2">box2</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<script>
const boxEl = document.querySelector('.box')
const boxE12 = document.getElementById('box2')
const boxEls = document.querySelectorAll('div');
console.log(boxEl)
console.log(boxE12)
console.log(boxEls)
</script>
</body>
</html>
이런식으로 const boxEl에 선택자 요소를 넣어준다는 뜻
요소 선택자
- querySelector('.box')
- CSS에서 배웠던 선택자를 사용하여 HTML을 선택하는 방법
- 문서에서 만나는 제일 첫 번째 요소를 반환함
- getElementById(“ID”)
- 해당 ID를 가지는 요소를 불러오는 메서드
- querySelectorAll(“요소선택자“)
- 선택자와 일치하는 모든 요소를 찾아 배열로 리턴해주는 메서드
이벤트
onclick
- 각각의 HTML 요소에 속성 값으로 JS 함수를 연결
<button onclick="test()">클릭</button>
<script>
function test() {
alert("test");
}
</script>
addEventListener(이벤트, 명령)
<button id="btn">클릭</button>
<script>
const btnEl = document.querySelector('#btn');
function test() {
alert('TEST');
}
// 방법은 3가지!
btnEl.addEventListener('click', test())
btnEl.addEventListener('click', function () {
alert('TEST')
})
btnEl.addEventListener('click', () => {
alert('TEST');
})
</script>
🔹 1. 마우스(Mouse) 이벤트
| click | 요소를 클릭할 때 발생 |
| dblclick | 요소를 더블 클릭할 때 발생 |
| mousedown | 마우스를 누를 때 발생 (클릭 유지) |
| mouseup | 마우스를 뗄 때 발생 |
| mousemove | 마우스를 움직일 때 발생 |
| mouseover | 요소 위로 마우스를 올릴 때 발생 (자식 요소 포함) |
| mouseenter | 요소 위로 마우스를 올릴 때 발생 (자식 요소 제외) |
| mouseleave | 요소에서 마우스가 벗어날 때 발생 (자식 포함) |
| mouseout | 요소에서 마우스가 벗어날 때 발생 (자식 제외) |
| contextmenu | 우클릭(마우스 오른쪽 버튼)할 때 발생 |
🔹 예제
document.getElementById("btn").addEventListener("click", function() {
alert("버튼이 클릭됨!");
});
🔹 2. 키보드(Keyboard) 이벤트
| keydown | 키를 누를 때 발생 (누르고 있는 동안 계속 발생) |
| keyup | 키를 뗄 때 발생 |
| keypress | 키를 입력할 때 발생 (대부분 keydown 사용을 권장) |
🔹 예제
document.addEventListener("keydown", function(event) {
console.log("눌린 키:", event.key);
});
🔹 3. 입력(Form) 이벤트
| input | <input>, <textarea> 값이 변경될 때 발생 |
| change | <input> 값이 변경되고 포커스를 잃을 때 발생 |
| focus | 요소에 포커스가 맞춰질 때 발생 |
| blur | 요소에서 포커스가 벗어날 때 발생 |
| submit | 폼이 제출될 때 발생 |
| reset | 폼이 초기화될 때 발생 |
🔹 예제
document.getElementById("username").addEventListener("input", function(event) {
console.log("입력 값:", event.target.value);
});
🔹 4. 윈도우(Window) & 문서(Document) 이벤트
| load | 페이지가 모두 로드될 때 발생 |
| DOMContentLoaded | HTML이 로드될 때 발생 (이미지 등 로딩 기다리지 않음) |
| resize | 창 크기가 변경될 때 발생 |
| scroll | 사용자가 스크롤할 때 발생 |
| unload | 사용자가 페이지를 떠날 때 발생 |
| beforeunload | 사용자가 페이지를 떠나기 전에 발생 |
🔹 예제
window.addEventListener("resize", function() {
console.log("창 크기:", window.innerWidth, "x", window.innerHeight);
});
🔹 5. 드래그 & 드롭 이벤트
| dragstart | 드래그를 시작할 때 발생 |
| drag | 드래그 중일 때 발생 |
| dragenter | 드래그한 요소가 대상 요소 위로 올 때 발생 |
| dragover | 대상 요소 위에서 드래그 중일 때 발생 |
| dragleave | 드래그한 요소가 대상 요소에서 벗어날 때 발생 |
| drop | 드래그한 요소를 놓을 때 발생 |
| dragend | 드래그가 끝났을 때 발생 |
🔹 예제
document.getElementById("dragItem").addEventListener("dragstart", function(event) {
console.log("드래그 시작!");
});
🔹 6. 터치(Touch) 이벤트 (모바일 전용)
| touchstart | 사용자가 화면을 터치할 때 발생 |
| touchmove | 터치 후 손가락을 움직일 때 발생 |
| touchend | 터치가 끝날 때 발생 |
| touchcancel | 터치가 취소될 때 발생 |
🔹 예제
document.addEventListener("touchstart", function(event) {
console.log("터치 시작!");
});
🔹 7. 미디어(Media) 이벤트
| play | 비디오/오디오가 재생될 때 발생 |
| pause | 비디오/오디오가 일시 정지될 때 발생 |
| ended | 비디오/오디오가 끝났을 때 발생 |
| volumechange | 볼륨이 변경될 때 발생 |
🔹 예제
document.getElementById("myVideo").addEventListener("ended", function() {
alert("비디오가 끝났어요!");
});
🔹 8. 클립보드(Clipboard) 이벤트
| copy | 사용자가 복사할 때 발생 |
| cut | 사용자가 잘라낼 때 발생 |
| paste | 사용자가 붙여넣기 할 때 발생 |
🔹 예제
document.addEventListener("copy", function() {
alert("복사 금지!");
});
반응형
'프론트엔드 > JavaScript' 카테고리의 다른 글
| (JavaScript) 10. this와 실행 컨텍스트 (0) | 2025.05.02 |
|---|---|
| (JavaScript) 8. 전개 연산자 (...)란? (0) | 2025.05.02 |
| (JavaScript) 7. map() 기본 사용법 (0) | 2025.05.02 |
| (JavaScript) 6. ES6+ 주요 기능 정리 (0) | 2025.05.02 |
| (JavaScript) 5. 비동기 처리 (Async & Promise) (0) | 2025.05.01 |