● 이벤트 드리븐 프로그래밍
- 이벤트가 발생했을 때, 호출될 함수를 이벤트 핸들러라고 한다.
- 이벤트가 발생했을 때, 호출을 위임하는 것을 이벤트 핸들러 등록이라고 함.
● 이벤트 타입
⚬ 마우스 이벤트
이벤트 타입 | 이벤트 발생 시점 |
click | 마우스 버튼을 클릭했을 때 |
dbclick | 마우스 버튼을 더블클릭했을 때 |
mousedown | 마우스 버튼을 눌렀을 때 |
mouseup | 누르고 있던 마우스 버튼을 놓았을 때 |
mousemove | 마우스 커서를 움직였을 때 |
mouseenter | 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링X) |
mouseover | 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링O) |
mouseleave | 마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링X) |
mouseout | 마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링O) |
⚬ 키보드 이벤트
이벤트 타입이벤트 발생 시점
이벤트 타입 | 이벤트 발생 시점 |
keydown | command,option,control,shift 키는 1번만 발생나머지 키들은 누르고 있으면 계속 발생 |
keyup | 누른 키를 놓았을 때 1번 발생 |
keypress | command,option,control,shift,delete,esc 키는 이벤트 발생 안함,폐지되었으므로 사용 권장X |
⚬ 포커스 이벤트
이벤트 타입 | 이벤트 발생 시점 |
focus | HTML 요소가 포커스 받았을 때 버블링 X |
blur | HTML 요소가 포커스를 잃었을 때버블링 X |
focusin | 포커스 받았을 때버블링 O |
focusout | 포커스 잃었을 때버블링 O |
⚬ 폼 이벤트
이벤트 타입이벤트 발생 시점
이벤트 타입 | 이벤트 발생 시점 |
submit | form 요소 내의 sumbit 버튼을 클릭했을 때 |
⚬ 값 변경 이벤트
이벤트 타입 | 이벤트 발생 시점 |
input | input, select, textarea 요소의 값이 입력됐을 때 발생 |
change | input, select, textarea 요소의 값이 변경됐을 때 입력하던 HTML요소에서 포커스를 잃었을 때 발생 |
readystatechange | HTML 문서의 파싱 상태인 document.readyState가 변경될 때('loading', 'interactive', 'complete') |
readystatechange 이벤트는 AJAX 요청의 상태가 변경될 때마다 발생한다.
⚬ DOM 뮤테이션 이벤트
이벤트 타입 | 이벤트 발생 시점 |
DOMContentLoaded | HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 되었을 때 |
아래는 DOMContentLoaded 예시코드이다.
DOMContentLoaded 이벤트를 사용하여 문서가 로드되고 HTML 요소들이 생성된 후에 JavaScript를 실행한다. 이벤트 리스너 함수에서는 message 요소를 선택하고 해당 요소의 내용을 변경하여 "JavaScript가 로드되었습니다!" 메시지를 표시한다.
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded 이벤트 예시</title>
</head>
<body>
<h1>DOMContentLoaded 이벤트 예시</h1>
<p id="message">JavaScript가 로드되기 전입니다.</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
const message = document.getElementById('message');
message.textContent = 'JavaScript가 로드되었습니다!';
});
</script>
</body>
⚬ 뷰 이벤트
이벤트 타입 | 이벤트 발생 시점 |
resize | 브라우저 윈도우 크기를 리사이즈 할 때 연속적으로 발생 window 객체에서만 발생 |
scroll | 스크롤할 때 연속적으로 발생 |
⚬ 리소스 이벤트
이벤트 타입 | 이벤트 발생 시점 |
load | DOMContentLoaded 이벤트 발생 이후, 모든 리소스 로딩이 완료됐을 때주로 winodw 객체에서 발생 |
unload | 리소스가 언로드될 때주로 새로운 웹페이지를 요청한 경우 |
abort | 리소스 로딩이 중단되었을 때 |
error | 리소스 로딩이 실패했을 때 |
- unload 이벤트는 페이지가 unload(떠남)되는 순간에 발생한다. 페이지 unload 이벤트는 보통 사용자가 다른 페이지로 이동하는 경우 발생한다. 이 경우, unload 이벤트가 발생하고 새로운 페이지를 로드한다.
<body>
<h1>unload 이벤트 예시</h1>
<p>이 페이지를 떠날 준비가 되셨나요?</p>
<a href="http://www.example.com">새로운 페이지로 이동</a>
<script>
window.addEventListener('unload', function() {
console.log('페이지가 unload(떠남)되었습니다.');
});
</script>
</body>
- abort 이벤트는 웹 페이지의 네트워크 요청이 취소될 때 발생한다. 이는 일반적으로 사용자가 요청을 취소하거나 네트워크 연결이 끊어지는 경우에 발생한다.
<body>
<h1>abort 이벤트 예시</h1>
<img src="http://www.example.com/image.jpg" alt="이미지">
<script>
// 이미지를 불러왔다.
const image = document.querySelector('img');
// 이미지 로드가 취소 됐을 때, 콘솔에 보이게 이벤트를 달았음.
image.addEventListener('abort', function() {
console.log('이미지 로드가 취소되었습니다!');
});
// 5초뒤 이미지가 로드 되지만 src는 비어있고, image에 abort라는 메서드를 통해
// 이미지 로드가 취소되게 설정함.
setTimeout(function() {
image.src = '';
image.abort();
}, 5000);
</script>
</body>
● 이벤트 핸들러 등록
이벤트 핸들러를 등록하는 방법은 총 3가지이다.
- 이벤트 핸들러 어트리뷰트 방식
- 이벤트 핸들러 프로퍼티 방식
- addEventListener를 메서드를 활용하는 방식
⚬ 이벤트 핸들러 어트리뷰트
이벤트 핸들러 어트리뷰트는 onclick과 같이 on 접두사와 이벤트 종류를 나타내는 이벤트 타입으로 이루어져 있다.
이벤트 핸들러 어트리뷰트 값으로 주의해야할 점은 함수 참조가 아니라 함수 호출문으로 할당해야한다. 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.
<body>
<button id="btn" onclick="sayHello('daeun')">버튼임네다.</button>
<script>
function sayHello(name) {
console.log(`Hello ${name}!`);
}
</script>
</body>
function onclick(event){
sayHello('daeun');
}
이처럼 작동하는 이유는 이벤트 핸들러에 인수를 전달하기 위해서다. (event 객체)
⚬ 이벤트 핸들러 프로퍼티 방식
이벤트 핸들러 어트리뷰트 방식도 결국 DOM 노드 객체의 이벤트 핸들러 프로퍼티로 변환되므로 결과적으로 이벤트 핸들러 프로퍼티 방식과 동일하다고 볼 수 있다. 차이점이 있다면 프로퍼티 방식은 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수 있다. 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.
<body>
<button id="btn">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
$button.onclick = function () {
console.log(`Hello daeun`);
};
</script>
</body>
<body>
<button id="btn">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
$button.onclick = function () {
console.log(`Hello daeun`);
};
$button.onclick = function () {
console.log(`Hello you jin`);
};
</script>
</body>
// 'Hello you jin' 만 출력된다.
⚬ addEventListener 방식
- 이벤트 핸들러를 한 개 이상 등록할 수 있음.
이벤트 핸들러 어트리뷰트 방식은 프로퍼티에 핸들러를 바인딩하지만, addEventListener방식은 인수에 핸들러를 전달한다.
<body>
<button id="btn">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
$button.onclick = function () {
console.log(`이벤트 핸들러 프로퍼티 활용함ㅋ`);
};
$button.addEventListener("click", function () {
console.log("addEventListener 썻음ㅋ");
});
</script>
</body>
둘 다 활용해도 둘 다 모두 출력을 하고 있다. 서로 아무런 영향을 주지 않다. addEventListener은 하나 이상의 이벤트 핸들러를 등록할 수 있다. 이때, 이벤트 핸들러는 순서대로 호출된다.
<body>
<button id="btn">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
function clickConsole() {
console.log("에드이밴트 리스너닥!!!");
}
$button.addEventListener("click", clickConsole);
$button.addEventListener("click", clickConsole);
</script>
</body>
하지만 addEventListener를 이벤트 핸들러로 참조가 같은 이벤트 핸들러를 중복해서 넣으면 하나만 호출된다.
● 이벤트 핸들러 제거
⚬ 이벤트 핸들러 어트리뷰트 제거
- 이벤트타깃.onclick = 'null' 로 바꿔주면 된다.
<body>
<button id="btn" onclick="clickConsole()">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
function clickConsole() {
console.log("에드이밴트 리스너닥!!!");
}
$btn.onclick = 'null'
</script>
</body>
⚬ 이벤트 핸들러 어트리뷰트 제거
removeEventListener 메서드를 활용해 제거한다. addEventListener와 똑같이 인수를 전달해야 제거된다. 다르면 제거되지 않음.
addEventListener에 무명함수를 써서 이벤트 핸들러를 전달한다면 제거할 수 없다.
<body>
<button id="btn">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
function clickConsole() {
console.log("에드이밴트 리스너닥!!!");
}
$button.addEventListener("click", clickConsole);
$button.removeEventListener("click", clickConsole);
</script>
</body>
● 이벤트 객체
이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
⚬ 이벤트 핸들러 어트리뷰트
<body>
<button id="btn" onclick="clickConsole(event)">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
function clickConsole(event) {
console.log(event);
}
</script>
</body>
이벤트 어트리뷰트에서 이벤트 핸들러가 이벤트 객체를 받으려면 꼭 매개변수에 event를 적어주어야한다. 왜냐면 앞에서 본 것과 같이 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체를 의미하기 때문이다. 그리고 이벤트 객체가 event로 암묵적으로 명명됨.
function onclick(event) {
clickConsole(event);
}
⚬ addEventListener
이벤트 핸들러 어트리뷰트와 다르게 그냥 아무 변수 값으로 설정해도, 이벤트 객체가 첫 번째 인수로 전달 된다.
<body>
<button id="btn" onclick="clickConsole(event)">버튼임네다.</button>
<script>
const $button = document.getElementById("btn");
$button.addEventListener("click", function (e) {
console.log(e);
});
</script>
</body>
● 이벤트 객체의 공통 프로퍼티
⚬ 이벤트 객체의 공통 프로퍼티
공통 프로퍼티 | 설명 | 타입 |
type | 이벤트 타입 | string |
target | 이벤트를 발생시킨 DOM 요소 | DOM 요소 노드 |
currentTarget | 이벤트 핸들러가 바인딩된 DOM 요소 | DOM 요소 노드 |
eventPhase | 이벤트 전파 단계0:이벤트 없음, 1: 캡처링, 2:타깃 , 3:버블링 | number |
bubbles | 이벤트를 버블링으로 전파하는지 여부 | boolean |
cancelable | preventDefault()로 기본 동작 취소 가능 여부 | boolean |
defaultPrevented | preventDefault 호출 여부 | boolean |
isTrusted | 사용자에 의해 발생한 이벤트면 true | boolean |
timeStamp | 이벤트 발생 시각 (1970.1.1.00:00:0 부터 경과한 ms) | number |
⚬ 마우스 정보 취득
- 마우스 포인터의 좌표 정보
- screenX, screenY
- clientX, clientY
- pageX, pageY
- offsetX, offsetY - 해당 키를 누른채로 클릭하였는지 여부
- shiftKey
- altKey
- ctrlKey
- button : 마우스에서 어떤 버튼을 눌렀는지
- 0 : 마우스 왼쪽
- 1 : 마우스 휠
- 2: 마우스 오른쪽
마우스로 div박스 움직이기
<body>
<div
class="greenBox"
style="background-color: darkcyan; width: 200px; height: 200px"
></div>
<script>
const $box = document.querySelector(".greenBox");
const startPoint = [0, 0];
const movePoint = [0, 0];
const move = (e) => {
movePoint[0] = e.clientX - startPoint[0];
movePoint[1] = e.clientY - startPoint[1];
$box.style.transform = `translate3d(${movePoint[0]}px, ${movePoint[1]}px, 0)`;
};
$box.addEventListener("mousedown", (e) => {
startPoint[0] = e.clientX - movePoint[0];
startPoint[1] = e.clientY - movePoint[1];
document.addEventListener("mousemove", move);
});
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
});
</script>
</body>
⚬ 키보드 정보 취득
KeyboardEvent 타입의 이벤트 객체가 갖고 있는 고유의 프로퍼티는 아래와 같다.
- altKey, shiftKey, metaKey (맥은 command키,윈도우는 윈도우키)
- key