▼ HTML, CSS, JavaScript 문서
<!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>
<div id="mouse">
<div id="btns">
<div id="btn0" class="btn"></div>
<div id="btn1" class="btn"></div>
<div id="btn2" class="btn"></div>
</div>
</div>
<script src="index.js"></script>
<script src="mouse-event.js"></script>
</body>
</html>#mouse {
width: 240px;
height: 390px;
border: 1px solid #333333;
border-radius: 150px;
overflow: hidden;
}
#btns {
display: flex;
position: relative;
width: 100%;
height: 150px;
border-bottom: 1px solid #333333;
}
#btn0 {
width: calc(50% - 1px);
height: 100%;
border-right: 1px solid #333333;
}
#btn1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
width: 40px;
height: 90px;
border: 1px solid #333333;
border-radius: 20px;
}
#btn2 {
width: 50%;
height: 100%;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: 900;
}
.clicked-0 #btn0 {
background-color: #eb2f2f;
}
.clicked-1 #btn1 {
background-color: #ffb62e;
}
.clicked-2 #btn2 {
background-color: #ffff58;
}
.dblclick #btn0 {
background-color: #0cb30c;
}let timer = 0;
function printEventType(e) {
const EVENT_DURATION = 800;
const eventTime = new Date();
if (timer === 0) {
timer = new Date();
}
if (eventTime - timer > EVENT_DURATION) {
console.log('--------------------------');
}
if (e.target.id !== 'mouse') {
e.preventDefault();
}
const btns = document.querySelector(`#btns`);
const btn = document.querySelector(`#btn${e.button}`);
btns.classList.add(`clicked-${e.button}`);
btn.textContent = e.button;
console.log(`${e.type} 이벤트가 발생했습니다.`);
if (e.type === 'dblclick') {
btns.className = 'dblclick';
}
function styleInit() {
btns.className = '';
btn.textContent = '';
}
setTimeout(styleInit, EVENT_DURATION);
timer = eventTime;
}
document.addEventListener('click', printEventType);
document.addEventListener('contextmenu', printEventType);
document.addEventListener('dblclick', printEventType);
document.addEventListener('mouseup', printEventType);
document.addEventListener('mousedown', printEventType);
마우스 버튼으로 발생시킬 수 있는 이벤트가 존재하는데
각 버튼별로 이벤트를 구분하고자 할때는 MoustEvent 객체의 button이라는 프로퍼티를 활용한다.
두 버튼으로 할 수 있는 주요 동작들을 나눠보자면
왼쪽 버튼 클릭과 오른쪽 버튼 클릭, 왼쪽 더블클릭까지 총 3가지로 나눌수있는데
자바스크립트에서 각각의 동작들은 click, contextmenu, dblclick 클릭 타입으로 이벤트를 다룰 수 있다.
거기다 mousedown, mouseup이라는 이벤트 타입으로 좀 더 세밀하게 동작들을 다룰 수 있다.
참고로 하나의 동작에 여러 이벤트들이 발생할 수도 있다.
예를 들면 사용자가 마우스 왼쪽 버튼을 한 번만 클릭하더라도
마우스를 눌렀다가 뗀 동작이기 때문에 mousedown, mouseup, click 총 3개의 이벤트가 발생한다.▼
이렇게 하나의 동작에 여러 이벤트가 발생하는 경우에 발생하는 이벤트들의 순서들을 잘 알아두는 것이 중요하다.
더블클릭은 클릭을 빠르게 두 번 한 것이니 클릭 이벤트가 빠르게 두 번 발생하고 나서야
더블클릭 이벤트가 발생한다. 즉 총 7개의 이벤트가 발생하는 것.▼
어쩌면 당연한 것일 수도 있지만
만약 하나의 요소에 어떤 클릭과 더블클릭 이벤트를 모두 만들어야하는데
더블클릭 이전에 클릭 이벤트가 두 번 발생한다는 사실을 생각하지 않고
더블 클릭 이벤트를 만들게 되면 클릭 이벤트가 먼저 두 번 발생하면서
예상하지 못한 결과를 얻을 수 있는 가능성이 존재한다.
이런 점을 고려하여 코드를 작성하는 것이 중요하다.
그리고 마우스 오른쪽 버튼 누를 때 이벤트 발생 순서가 운영체제별로 다르다.
window OS 는 contextmenu 이벤트가 발생할 때
click과 동일하게 mousedown, moseup, contextmenu 순서로 이벤트가 발생하지만
Mac OS는 mousedown, contextmenu, mouseup 순서로 이벤트가 발생한다.▼
만약 preventDefault 메소드로 오른쪽 버튼을 클릭했을 때 메뉴창이 뜨지 않게하면
메뉴창이 뜨는 상황이라면 mouseup 이벤트가 발생하지 않는다.
마우스 오른쪽 버튼으로 이벤트를 제어하는 상황이 흔하진 않지만 이러한 부분도 참고해두면 좋다.
간단하게 마우스 버튼과 관련된 이벤트에 살펴봤는데,
MouseEven 객체의 button 프로퍼티를 활용하면
이벤트를 발생시킨 마우스의 버튼을 확인할 수 있고
각 버튼으로 할 수 있는 이벤트 타입도 확인할 수 있었다.
특히 하나의 마우스 동작에도 여러 개의 이벤트가 발생한다는 점과
각 이벤트끼리 순서가 있다는 점 때문에 여러개의 이벤트를 다룰 때 주의해야한다.
'JS' 카테고리의 다른 글
| (20) Interactive JavaScript (Event) - 키보드 이벤트 (0) | 2024.11.14 |
|---|---|
| (19) Interactive JavaScript (Event) - 마우스 이동 이벤트 (0) | 2024.11.13 |
| (17) Interactive JavaScript (Event) - 브라우저의 기본 동작 제어 (0) | 2024.11.11 |
| (16) Interactive JavaScript (Event) - 이벤트 위임 (0) | 2024.11.08 |
| (15) Interactive JavaScript (Event) - 이벤트 버블링 (0) | 2024.11.07 |