목차
- 1. 마우스 클릭 이벤트(click)
- 2. 마우스 누름 상태 이벤트(mousedown)
- 3. 마우스 뗌 상태 이벤트(mouseup)
- 4. 마우스 더블 클릭 이벤트(dblclick)
1. 마우스 클릭 이벤트(click)
이 예제에서는 마우스 클릭 이벤트를 처리하는 방법을 설명합니다. HTML 요소를 클릭했을 때 발생하는 이벤트를 감지하고 해당 이벤트에 대한 처리를 합니다.
<!DOCTYPE html>
<html>
<head>
<title>마우스 클릭 이벤트 예제</title>
</head>
<body>
<button id="myButton">클릭해보세요</button>
<script>
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
</body>
</html>
2. 마우스 누름 상태 이벤트(mousedown)
이 예제에서는 마우스 누름 상태 이벤트를 처리하는 방법을 설명합니다. HTML 요소 위에서 마우스를 누를 때 발생하는 이벤트를 감지하고 해당 이벤트를 처리할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>마우스 누름 상태 이벤트 예제</title>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<script>
var div = document.getElementById("myDiv");
div.addEventListener("mousedown", function() {
div.style.backgroundColor = "lightgreen";
});
</script>
</body>
</html>
3. 마우스 뗌 상태 이벤트(mouseup)
이 예제에서는 마우스 뗌 상태 이벤트를 처리하는 방법을 설명합니다. HTML 요소 위에서 마우스를 뗄 때 발생하는 이벤트를 감지하고 해당 이벤트에 대한 동작을 정의하는 코드를 제공합니다.
<!DOCTYPE html>
<html>
<head>
<title>마우스 뗌 상태 이벤트 예제</title>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<script>
var div = document.getElementById("myDiv");
div.addEventListener("mouseup", function() {
div.style.backgroundColor = "lightyellow";
});
</script>
</body>
</html>
4. 마우스 더블 클릭 이벤트(dblclick)
이 예제에서는 마우스 더블 클릭 이벤트를 처리하는 방법을 설명합니다. HTML 요소를 더블 클릭했을 때 발생하는 이벤트를 감지하고 해당 이벤트에 처리가 가능합니다.
<!DOCTYPE html>
<html>
<head>
<title>마우스 누름 상태 이벤트 예제</title>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<script>
var div = document.getElementById("myDiv");
div.addEventListener("mousedown", function() {
div.style.backgroundColor = "lightgreen";
});
</script>
</body>
</html>
반응형