** 동영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
1. 이벤트객체
- 이번 강좌에서는 이벤트 객체의 속성과 메서드에 대해서 배워보도록 하겠습니다.
- 이벤트객체는 DOM과 관련된 이벤트가 발생되면 발생되는 관련 정보를 저장하는 객체라고 생각하시면 됩니다.
- 예시로 마우스로 이벤트가 발생되면 마우스의 위치값을 저장해주는 것을 마우스이벤트 객체라 보면 됩니다.
- 예시로 키보드로 이벤트가 발생되면 누른 키의 키코드를 저장해주는 것을 키보드이벤트 객체라 보면 됩니다.
## 문법
//1. 고전이벤트사용
문서객체선택.on이벤트타입명 = function(이벤트객체매개변수){
}
//2. addEventLister()사용
문서객체선택.addEventListener('이벤트타입',function(이벤트객체매개변수){
});
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
</head>
<body>
<button id="btn">버튼</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(e){
console.log(e.type);
}
</script>
</body>
</html>- 보통 이벤트객체매개변수는 [event] 혹은 [e]라고 많이 씁니다.
- 매개변수는 영어로 뭐라고 써도 호출만 잘해서 쓰면 문제가 없지만, 이해를 위해 [event] 혹은 [e]라고 작성해주세요.
## 코드 결과
- 클릭하면 이벤트타입인 click을 colsole에 잘 반환하는 것을 확인할 수 있습니다.
2. 이벤트 객체가 공통적으로 사용하는 속성과 메서드
- 보통 마우스이벤트가 갖는 속성/메서드, 키보드이벤트가 갖는 속성/메서드는 다릅니다.
- 하지만 모든 이벤트가 공통으로 갖는 속성과 메서드도 있습니다.
1) 공통 이벤트객체 속성과 메서드의 종류
| 종류 | 설명 |
| bubbles | 이벤트가 버블링되는지 true/false로 처리함 |
| cancleable | 이벤트의 기본 동작 취소가능 여부를 true/false로 처리함 |
| currentTarget | 현재 이벤트를 처리 중인 요소를 반환 |
| defaultPrevented | true면 preventDefault()메서드가 호출상태 |
| eventPhase | 현재 평가 중인 이벤트 흐름단계를 반환(1: 캡쳐링, 2: 타깃, 3: 버블링) |
| stopImmediatePropagation( ) | 이벤트 캡처링, 이벤트 버블링 모두 취소하며 다른 이벤트 핸들러 호출을 막음 |
| stopPropagation() | 이벤트 캡처링, 이벤트 버블링 모두 취소하며 bubbles가 true일때 기능함. |
| target | 이벤트를 trigger한 요소를 반환 |
| type | 발생된 이벤트 타입을 반환 |
| view | 이벤트가 발생한 window개체에 대한 참조를 반환 |
2) 이벤트 흐름의 3단계
| 종류 | 설명 |
| 캡처링(capturing) | 이벤트가 하위 요소로 전파되는 단계 |
| 타깃(target) | 이벤트가 실제 타깃 요소에 전달되는 단계 |
| 버블링(bubbling) | 이벤트가 상위요소로 전파되는 단계 |
- 위 그림은 이벤트의 흐름을 보여주는 그림 예시입니다.
3) 이벤트 버블링의 예시
## 코드 예시
- h1태그의 자손으로 a태그를 처리했습니다. 그리고 각각 요소는 클릭하면 배경색이 바뀌도록 처리해봅시다.
- h1을 클릭하면 배경색을 파란색으로 변경, a태그를 클릭하면 배경색을 빨간색으로 변경하도록 처리했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
<style>
*{ padding: 0; margin: 0; }
h1{ margin: 20px; padding: 20px; border: 3px solid black; }
a{ display: inline-block; padding: 20px; border: 3px solid black; }
</style>
</head>
<body>
<h1 id="title">
<a href="#" id="link">링크태그</a>
</h1>
<script>
var title = document.getElementById('title');
var link = document.getElementById('link');
title.onclick = function(){
this.style.backgroundColor = 'blue';
}
link.onclick = function(){
this.style.backgroundColor = 'red';
}
</script>
</body>
</html>
## 코드 결과
- h1태그를 클릭하면 자신 요소만 파란색으로 변경되는 것이 보입니다.
- 하지만 a태그를 클릭하면 부모의 h1도 a태그도 모두 배경색이 변경되는 것을 확인할 수 있습니다.
- 이것을 이벤트 버블링이라고 합니다.
4) stopPropagation()
- 이벤트가 버블링이나 캡쳐링이 일어날때 이벤트 전달을 방지하는 메서드입니다.
## 코드 예시
- 위에서 이벤트 전달되는 코드에서 a태그에 stopPropagation()코드를 추가해보았습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
<style>
*{ padding: 0; margin: 0; }
h1{ margin: 20px; padding: 20px; border: 3px solid black; }
a{ display: inline-block; padding: 20px; border: 3px solid black; }
</style>
</head>
<body>
<h1 id="title">
<a href="#" id="link">링크태그</a>
</h1>
<script>
var title = document.getElementById('title');
var link = document.getElementById('link');
title.onclick = function(){
this.style.backgroundColor = 'blue';
}
link.onclick = function(e){
e.stopPropagation();
this.style.backgroundColor = 'red';
}
</script>
</body>
</html>- 이벤트 콜백함수에 매개변수로 [e]라고 설정하여 이벤트객체를 선택할 수 있도록 처리했습니다.
- 그리고 그안에 [e.stopPropagation();]를 처리해서 이벤트 전달을 막았습니다.
## 코드 결과
- 아까와는 다르게 a태그를 클릭해도 h1에 이벤트가 적용되지 않는 것을 확인할 수 있습니다.
- 하지만 stopPropagation()을 많이 사용하는 것보단 이벤트 타킷을 잘 정하는 것이 코드에는 훨씬 좋습니다.
- 이러한 메서드들을 사용하는 경우 분석시스템의 코드가 동작하지 않기 때문에 분석이 제대로 되지 않아 죽은 영역(dead zone)이라고 부르기도 합니다.
- 분석 시스템의 경우 네비게이션에서 그 요소를 클릭한 횟수 등을 확인할 수 있어 어떤 페이지에 많이 들어가는지 알 수 있게 해줍니다. 하지만 stopPropagation()을 사용하면 그것을 알 수 없기 때문에 사용을 많이 하는 것은 좋지 못합니다.
5) preventDefault()
- 요소가 갖고 있는 기본이벤트를 제거해주는 메서드입니다.
- 대표적인 기본이벤트는 a태그가 페이지를 이동해주는 이벤트를 갖고 있습니다.
- 두번째로는 form태그가 데이터를 전송하는 이벤트를 갖고 있습니다.
## a태그 기본이벤트 제거 코드 예시
- 이번엔 링크된 [오쌤의 니가스터디]라는 글자를 클릭하면 페이지로 바로 이동되지 않고 [오쌤의 니가스터디로 이동하겠습니까?]라는 confirm창이 뜨도록 해서 확인을 누르면 주소가 이동되게 처리하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
</head>
<body>
<h1>
<a href="https://ossam5.tistory.com/" id="link">오쌤의 니가스터디</a>
</h1>
<script>
var link = document.getElementById('link');
link.onclick = function(e){
e.preventDefault(); //기본이벤트 제거
var addr = this.getAttribute('href'); //a태그가 원래 갖고 있는 href의 속성값을 담는 변수
//확인취소창
var q = confirm('오쌤의 니가스터디로 이동하시겠습니까?');
if(q){ //확인버튼을 클릭하면
location.assign(addr); //원래 주소로 주소를 변경
}
}
</script>
</body>
</html>
## a태그 기본이벤트 제거 코드 결과
- 처음 클릭했을때부터 기본이벤트가 제거되서 페이지 이동이 되지 않습니다.
- 취소버튼을 누르면 페이지가 이동되지 않고, 확인버튼을 누르면 페이지가 이동되는 것을 확인할 수 있습니다.
3. 마우스 이벤트 객체
- 이번에는 마우스 이벤트(click, mouseenter 등)가 발생될때 생성되는 이벤트 객체를 확인해보도록 하겠습니다.
1) 마우스 이벤트 객체 속성과 메서드의 종류
| 종류 | 설명 |
| altKey | 마우스 이벤트가 발생되었을때 [Alt]키가 눌렀는지를 true/false로 반환 |
| button | 마우스 이벤트가 발생되었을때 눌린 마우스 버튼을 반환 |
| buttons | 마우스 이벤트가 발생되었을때 눌린 마우스 버튼들을 반환 |
| clientX | 마우스 이벤트가 발생되었을때 현재 창을 기준으로 마우스 포인터의 X축 좌표를 반환 |
| clientY | 마우스 이벤트가 발생되었을때 현재 창을 기준으로 마우스 포인터의 Y축 좌표를 반환 |
| ctrlKey | 마우스 이벤트가 발생되었을때 [Ctrl]키가 눌렸는지를 true/false로 반환 |
| getModifierState() | 삽입/삭제의 영향을 받는 대상 범위를 포함하는 배열을 반환 |
| metaKey | 마우스 이벤트가 발생되었을때 메타키가 눌렸는지를 true/false로 반환 ** 메타키(metakey) : 윈도우에서는 윈도우키를 의미하는데, 보통 OS별로 다르기 때문에 메타키라고 부름 |
| movementX | 마지막 mousemove 이벤트 위치를 기준으로 마우스포인터의 X축 좌표 반환 |
| movementY | 마지막 mousemove 이벤트 위치를 기준으로 마우스포인터의 Y축 좌표 반환 |
| offsetX | 대상 요소의 가장자리 위치를 기준으로 마우스포인터의 X축 좌표 반환 |
| offsetY | 대상 요소의 가장자리 위치를 기준으로 마우스포인터의 Y축 좌표 반환 |
| pageX | 마우스 이벤트가 발생되었을 때 문서 기준으로 마우스포인터의 X축 좌표 반환 |
| pageY | 마우스 이벤트가 발생되었을 때 문서 기준으로 마우스포인터의 Y축 좌표 반환 |
| region | 마우스 이벤트 영향을 받는 히트영역의 id를 반환, 영역이 아니면 null반환 |
| relatedTarget | 마우스 이벤트를 발생시킨 요소와 관련된 요소(있는 경우만) 반환 |
| screenX | 마우스 이벤트가 발생되었을 때 화면을 기준으로 마우스포인터의 X축 좌표 반환 |
| screenY | 마우스 이벤트가 발생되었을 때 화면을 기준으로 마우스포인터의 Y축 좌표 반환 |
| shiftKey | 마우스 이벤트가 발생되었을 때 [Shift]키가 눌렀는지를 true/false로 반환 |
| which | 마우스 이벤트가 발생되었을때 어떤 마우스 버튼을 눌렀는지를 반환 |
2) pageX/pageY
## 코드 예시
- 마우스를 움직일때 마우스 포인터의 좌표값을 문서를 기준으로 확인해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
</head>
<body>
<h1 id="text01"></h1>
<h1 id="text02"></h1>
<script>
//1. 문서객체 변수에 담기
var text01 = document.getElementById('text01');
var text02 = document.getElementById('text02');
//2. body전체에서 마우스를 움직일때 마우스포인터 좌표값을 h1태그에 반환
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
text01.textContent = x;
text02.textContent = y;
}
</script>
</body>
</html>
## 코드 결과
3) clientX/clientY
## 코드 예시
- 마우스를 움직일때 원요소가 마우스를 따라다니도록 처리해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
<style>
#circle{ position: absolute; left: 0; top: 0; background-color: navy; width: 50px; height: 50px; border-radius: 25px; }
</style>
</head>
<body>
<div id="circle"></div>
<script>
//1. 원을 문서객체 변수에 담기
var circle = document.getElementById('circle');
//2. body전체에서 마우스를 움직일때 원이 마우스포인터 따라다니게 처리
document.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
//25를 뺀 이유는 원의 반지름으로 포인터가 가운데 오도록 처리
circle.style.left = (x - 25) + 'px';
circle.style.top = (y - 25) + 'px';
}
</script>
</body>
</html>
## 코드 결과
4. 키보드 이벤트 객체
- 이번에는 키보드 이벤트(keypress, keyup 등)가 발생될때 생성되는 이벤트 객체를 확인해보도록 하겠습니다.
1) 키보드 이벤트 객체 속성과 메서드의 종류
| 종류 | 설명 |
| altKey | 키보드 이벤트가 발생되었을때 [Alt]키가 눌렀는지를 true/false로 반환 |
| charCode | keypress 이벤트가 발생되었을때 눌린 키의 유니코드 문자 코드를 반환 |
| code | 키보드 이벤크가 발생되었을때 눌린 키의 코드를 반환 |
| ctrlKey | 키보드 이벤트가 발생되었을때 [Ctrl]키가 눌렸는지를 true/false로 반환 |
| isComposing | 이벤크 상태가 작성 중인지 여부를 true/false로 반환 |
| key | 이벤트가 나타내는 키의 키값을 반환 |
| keyCode | 키보드 이벤트가 발생되었을때 눌린 키의 유니코드 키코드를 반환 |
| location | 키보드 또는 장치의 키 위치를 반환 |
| metaKey | 키보드 이벤트가 발생되었을때 메타키가 눌렸는지를 true/false로 반환 ** 메타키(metakey) : 윈도우에서는 윈도우키를 의미하는데, 보통 OS별로 다르기 때문에 메타키라고 부름 |
| repeat | 키가 반복적으로 눌리고 있는지 여부를 반환 |
| shiftKey | 키보드 이벤트가 발생되었을 때 [Shift]키가 눌렀는지를 true/false로 반환 |
| which | 키보드 이벤트가 발생되었을 때 눌린 키의 유니코드 문자 코드를 반환 |
2) keyCode
## 코드 예시
- 키보드를 눌렀을때의 눌린 키의 유니코드를 반환해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
</head>
<body>
<input type="text" id="textbox">
<p>키코드 : <span id="result"></span></p>
<script>
//1. 문서객체 변수에 담기
var textbox = document.getElementById('textbox');
var result = document.getElementById('result');
//2. 키보드 이벤트 발생
textbox.onkeypress = function(e){
var num = e.keyCode;
result.textContent = num;
}
</script>
</body>
</html>
# 코드 결과
5. 마우스휠 이벤트 객체
- 이번에는 마우스휠 이벤트가 발생될때 생성되는 이벤트 객체를 확인해보도록 하겠습니다.
1) 마우스휠 이벤트 객체 속성과 메서드의 종류
| 종류 | 설명 |
| deltaX | 마우스 휠의 가로 스크롤 정도를 반환(x축) - 보통 오른쪽으로 가면 양수, 왼쪽으로 이동하면 음수 |
| deltaY | 마우스 휠의 세로 스크롤 정도를 반환(y축) - 보통 아래쪽으로 가면 양수, 위쪽으로 가면 음수 |
| deltaZ | z축에 대한 마우스 휠의 스크롤 정도를 반환 |
| deltaMode | 델타값(픽셀, 라인 또는 페이지)의 측정 단위를 나타내는 숫자를 반환 |
- 과거에 mousewheel이벤트 일때는 [originalEvent.wheelDelta]라는 속성도 있었습니다.
2) deltaY
## 코드 예시
- 스크롤바를 내릴때 deltaY값을 h1태그에 담아보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
<style>
body{ height: 2000px; }
#text{ position: fixed; top: 10px; left: 10px; }
</style>
</head>
<body>
<h1 id="text"></h1>
<script>
//1. 문서객체 변수에 담기
var text = document.getElementById('text');
//2. 마우스 휠 처리
document.onwheel = function(e){
var top = e.deltaY;
text.textContent = top;
}
</script>
</body>
</html>
## 코드 결과
- 크롬이라서 아래로 내릴때 [100]으로 처리, 위로 올릴때 [-100]으로 처리됩니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 25강 자바스크립트 Forms - 오쌤의 니가스터디 (0) | 2021.06.17 |
|---|---|
| [JS강좌] 24강 HTML DOM Node - 오쌤의 니가스터디 (0) | 2021.06.16 |
| [JS강좌] 22강 DOM - 문서객체이벤트 - 오쌤의 니가스터디 (0) | 2021.06.12 |
| [JS강좌] 21강 DOM - 문서객체생성 - 오쌤의 니가스터디 (0) | 2021.06.12 |
| [JS강좌] 20강 DOM - 문서객체선택 - 오쌤의 니가스터디 (0) | 2021.06.11 |
