JavaScript - 마우스 이벤트

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 JavaScript 마우스 이벤트의 fascinaiting 세계로 창을 열어보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해드리는 것을 기쁘게 생각합니다. 믿어 주세요, 이 튜토리얼의 끝을 맺을 때쯤에는 마우스 이벤트를 프로처럼 다룰 수 있을 거예요!

일반 마우스 이벤트

코드로 뛰어들기 전에, JavaScript에서 가장 일반적인 마우스 이벤트 중 몇 가지를 살펴보겠습니다. 이 것들은 컴퓨터가 마우스와의 상호작용을 이해하는 다양한 방법으로 생각해 보세요:

이벤트	설명
click	마우스가 요소에 클릭할 때 발생
dblclick	마우스가 요소에 더블 클릭할 때 발생
mousedown	마우스 버튼이 요소에 눌려질 때 발생
mouseup	마우스 버튼이 요소 위에서 뗐을 때 발생
mousemove	마우스 포인터가 요소 위에서 이동할 때 발생
wheel	마우스 휠이 요소 위에서 올라가거나 내려갈 때 발생

이제 이러한 이벤트들을 몇 가지 손으로 만들어 보겠습니다!

예제: 클릭 이벤트

가장 기본적이고 흔히 사용되는 마우스 이벤트인 클릭 이벤트부터 시작해보겠습니다.

<button id="myButton">Click me!</button>

<script>
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>

이 예제에서 우리는 JavaScript가 버튼에 클릭을 듣도록 하고 있습니다. 클릭 소리를 듣는 것처럼(개가 푸이를 듣는 것처럼), 그것을 듣고 작동을 시작합니다.

여기서 일어나는 일은 다음과 같습니다:

1. document.getElementById('myButton')를 사용하여 버튼을 가져옵니다.
2. addEventListener을 사용하여 이벤트 리스너를 버튼에 추가합니다.
3. 클릭 이벤트를 듣도록 합니다.
4. 클릭이 발생하면 제공한 함수를 실행하여 알림을 표시합니다.

이것을 시도해 보세요! 마법처럼 보일 수 있지만, 실제로는 JavaScript가 그 일을 하고 있을 뿐입니다.

예제: 더블 클릭 이벤트

이제 더블 클릭 이벤트로 도전해보겠습니다. 클릭의 두 배로 좋아요!

<p id="myParagraph">Double click me to change my color!</p>

<script>
let paragraph = document.getElementById('myParagraph');

paragraph.addEventListener('dblclick', function() {
this.style.color = getRandomColor();
});

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>

이 재미있는 예제에서 더블 클릭을 하면 문단의 색상을 랜덤 색상으로 변경합니다. 변화하는 색상의 변신을 보는 것은 챙이지만, 더 cooler하게 당신이 컨트롤할 수 있습니다!

getRandomColor 함수는 우리의 작은 색상 마법사입니다. 각 호출마다 랜덤 색상을 생성합니다. 지금은 그 내부 작동에 대해太多하게 걱정하지 마세요 - 단지 그것이 우리에게 랜덤 색상을 제공한다는 것을 알아 두세요.

예제: 마우스 다운과 마우스 업 이벤트

이제 마우스 다운과 마우스 업 이벤트를 살펴보겠습니다. 이 것들은 마우스 이벤트의 음양입니다.

<div id="myBox" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
let box = document.getElementById('myBox');

box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'red';
});

box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'blue';
});
</script>

이 예제에서 우리의 상자는 마우스 버튼이 눌려질 때 빨간색으로 변하고, 버튼이 뗐을 때 다시 파란색으로 변합니다. 이것은 스트레스 해소 장난감처럼 보일 수 있지만, 디지털이에요!

예제: 마우스 이동 이벤트

마우스가 요소 위에서 이동할 때 발생하는 마우스 이동 이벤트를触发합니다. 마우스를 미로에서 추적하는 것처럼 보일 수 있지만, 덜 cheesier입니다.

<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid black;">
<p>Move your mouse in here!</p>
<p id="coordinates"></p>
</div>

<script>
let tracker = document.getElementById('mouseTracker');
let coordDisplay = document.getElementById('coordinates');

tracker.addEventListener('mousemove', function(event) {
let x = event.clientX - tracker.offsetLeft;
let y = event.clientY - tracker.offsetTop;
coordDisplay.textContent = `X: ${x}, Y: ${y}`;
});
</script>

이 예제는 작은 마우스 추적 영역을 만듭니다. 마우스를 상자 안에서 이동하면, 그 좌표를 표시합니다. 마치 작은 마우스 선장처럼, 픽셀의 바다를 항해하는 것처럼 느껴질 거예요!

예제: 휠 이벤트

마지막으로, 휠 이벤트를 살펴보겠습니다. 마우스 휠을 사용할 때 발생하는 이벤트입니다.

<div id="wheelDemo" style="width: 200px; height: 200px; background-color: yellow; overflow: auto;">
<p style="height: 1000px;">Scroll me using the mouse wheel!</p>
</div>

<script>
let wheelArea = document.getElementById('wheelDemo');

wheelArea.addEventListener('wheel', function(event) {
event.preventDefault(); // 기본 스크롤 동작을 방지

this.scrollTop += event.deltaY;

if (this.scrollTop > 0) {
this.style.backgroundColor = `rgb(255, ${255 - this.scrollTop}, 0)`;
}
});
</script>

이 예제에서 마우스 휠을 스크롤할 때 배경 색상이 노란색에서 적색으로 변합니다. 마치 일몰처럼 보일 수 있지만, 마우스 휠로 컨트롤할 수 있습니다!

event.deltaY는 수직 스크롤의 양을 제공합니다. 이를 사용하여 콘텐츠를 스크롤하고 색상을 변경합니다.

그리고 여러분, JavaScript 마우스 이벤트의 땅을 여행했습니다. 연습이 완벽을 만드는 것을 기억하며, 이 이벤트들을 실험하지 마세요. 언제 그때문에, 여러분의 사용자들이 "와, 어떻게 그랬을까?"라고 말할 만큼 상호작용적인 웹 경험을 만들 수 있을 거예요!

행복한 코딩이 되시고, 여러분의 마우스가 항상 정확하게 클릭하길 바랍니다!

Credits: Image by storyset