자바스크립트 이벤트 중 Mouse와 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다.
Mouse Event
click: 요소를 클릭(버튼을 눌렀다가 뗌)했을 때 발생
dbclick: 요소를 더블클릭했을 때 발생
mousedown: 요소에 마우스 버튼을 눌렀을 때 발생
mouseup: 요소에 마우스 버튼을 뗐을 때 발생
mouseenter: 요소 안에 커서가 들어갔을 때 발생
mouseleave: 요소 안에서 커서가 벗어났을 때 발생
mousemove: 해당 요소에서 커서를 움직였을 때 발생
contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생
wheel: 마우스 휠을 굴렸을 때 발생
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid;
background-color: red;
overflow: auto;
}
.child {
width: 200px;
height: 1000px;
border: 10px solid;
background-color: aqua;
font-size: 40px;
}
.child.active1 {
background-color: beige;
}
.child.active2 {
background-color: gray;
}
.child.active3 {
background-color: blueviolet;
}
.child.active4 {
background-color: black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
<script>
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');
childEl.addEventListener('click', () => {
childEl.classList.toggle("active1");
});
childEl.addEventListener('dbclick', () => {
childEl.classList.toggle("active2");
});
childEl.addEventListener('mousedown', () => {
childEl.classList.add("active3");
});
childEl.addEventListener('mouseup', () => {
childEl.classList.remove("active3");
}); // active 1,4 주석처리하고 시험하면 됨
childEl.addEventListener('mouseenter', () => {
childEl.classList.add("active4");
});
childEl.addEventListener('mouseleave', () => {
childEl.classList.remove("active4");
}); // hover 효과와 유사
childEl.addEventListener('mousemove', event => {
console.log(event.offsetX, event.offsetY);
}); // 마우스 좌표가 나옴
childEl.addEventListener('contextmenu', event => {
event.preventDefault(); // 우클릭시 메뉴 안나옴
console.log(event);
});
childEl.addEventListener('wheel', event => {
console.log(event);
});
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 이벤트 - Focus & Form Event (0) | 2023.04.24 |
|---|---|
| [JavaScript] 이벤트 - Keyboard Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
| [JavaScript] 이벤트 버블링/캡쳐링 (0) | 2023.04.22 |
| [JavaScript] 이벤트(Event, addEventListener) (0) | 2023.04.22 |
