728x90
안녕하세요. 이번 시간에는 마우스 드래그를 통해 한번에 이벤트를 발생시키는 방법에 대해 알아보겠습니다.
자바스크립트에는 마우스와 관련된 다양한 이벤트를 제공하는데, 아래의 예제에서는 mousedown(마우스를 누르고 있을 때), mousemove(마우스를 움직일 때), mouseup(마우스를 뗄 때) 이 세 가지를 사용하여 드래그를 했을 때 버튼 색깔을 바꾸는 방식입니다.
index.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer = "defer" src = "./index.js"></script>
</head>
<style>
.btn {
background-color : gray;
border-radius : 1rem;
font-size : 12px;
line-height : 16px;
padding : 8px;
margin : 1px;
text-align : center;
width: 80px;
}
</style>
<body>
<button id = "1" class = "btn">버튼1</button>
<button id = "2" class = "btn">버튼2</button>
<button id = "3" class = "btn">버튼3</button>
<button id = "4" class = "btn">버튼4</button>
<button id = "5" class = "btn">버튼5</button>
</body>
</html>
index.js
for (const button of document.querySelectorAll('.btn')) {
mouseMove(button, function (event) {
// 드래그했을 때 해당 부분이 버튼이 아닐 경우에는 return
if (!(event.target instanceof HTMLButtonElement)) return;
// 드래그한 커서가 버튼 위에 갈 경우 빨간색으로 표시
event.target.style.backgroundColor = 'red';
});
// 버튼 클릭했을 때 이벤트
button.addEventListener('click', (event) => {
clickEvent(event);
})
}
function mouseMove(target, whileMove) {
let endMove = function () {
// 마우스를 뗄 때 이벤트 리스너 제거
window.removeEventListener('mousemove', whileMove);
window.removeEventListener('mouseup', endMove);
};
// 마우스를 클릭한 채 움직이면 이벤트리스너 생성
target.addEventListener('mousedown', function (event) {
event.stopPropagation();
window.addEventListener('mousemove', whileMove);
window.addEventListener('mouseup', endMove);
});
}
// 클릭했을 때 빨간색이면 회색으로, 회색이면 빨간색으로 전환
function clickEvent(event) {
const button = event.target;
if (button.style.backgroundColor == 'red') {
button.style.backgroundColor = 'gray';
}
else {
button.style.backgroundColor = 'red';
}
}
코드 실행영상입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] clipboard api를 사용해서 클립보드에 특정 텍스트를 복사하는 방법 (0) | 2023.04.03 |
|---|---|
| [JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법 (0) | 2023.04.02 |
| [javascript] css 제어로 확장형 사이드 메뉴 만들기 (0) | 2023.03.23 |
| [JavaScript] fetch 요청 취소 (0) | 2023.03.19 |
| [JavaScript] Selector 태그에 placeholder 적용하기 (0) | 2023.03.18 |
