SeouliteLab
jQuery로 마우스 이벤트의 수직 위치 파악하기 본문
마우스 이벤트는 웹 페이지에서 사용자와 상호작용하는데 중요한 역할을 합니다. jQuery의 event.pageY 속성을 사용하면 마우스 이벤트가 발생한 위치의 수직 좌표를 얻을 수 있습니다. 이를 활용하여 다양한 상황에서 마우스 이벤트를 처리할 수 있습니다.
예제 1: 클릭한 위치의 수직 좌표 출력
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).click(function(event){
$('#result1').text('클릭한 위치의 수직 좌표: ' + event.pageY);
});
});
</script>
</head>
<body>
<p>문서 내 어느 곳이든 클릭해보세요.</p>
<p id="result1"></p>
</body>
</html>
결과:
- 문서 내 어느 위치를 클릭해도 해당 위치의 수직 좌표가 표시됩니다.
설명:
이 예제에서는 문서 전체에 클릭 이벤트를 등록하여 클릭한 위치의 수직 좌표를 출력합니다. event.pageY 속성을 사용하여 마우스 이벤트가 발생한 위치의 수직 좌표를 가져와서 결과로 출력합니다.
예제 2: 요소 내에서의 마우스 이동 좌표 출력
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#target2').mousemove(function(event){
$('#result2').text('마우스 이동 위치의 수직 좌표: ' + event.pageY);
});
});
</script>
</head>
<body>
<div id="target2" style="width: 200px; height: 100px; background-color: lightblue;">마우스를 이동해보세요.</div>
<p id="result2"></p>
</body>
</html>
결과:
- 요소 내에서 마우스를 이동하면 해당 위치의 수직 좌표가 표시됩니다.
설명:
이 예제에서는 특정 요소에 마우스 이동 이벤트를 등록하여 마우스가 해당 요소 내에서 이동할 때의 수직 좌표를 출력합니다. event.pageY 속성을 사용하여 마우스 이벤트가 발생한 위치의 수직 좌표를 가져와서 결과로 출력합니다.
예제 3: 드래그한 거리에 따른 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
var startY, endY;
$('#target3').mousedown(function(event){
startY = event.pageY;
});
$('#target3').mouseup(function(event){
endY = event.pageY;
var distance = endY - startY;
if (distance > 0) {
$('#result3').text('아래로 ' + distance + ' 픽셀 이동');
} else if (distance < 0) {
$('#result3').text('위로 ' + (-distance) + ' 픽셀 이동');
} else {
$('#result3').text('이동하지 않음');
}
});
});
</script>
</head>
<body>
<div id="target3" style="width: 200px; height: 100px; background-color: lightgreen;">마우스를 누른 채로 드래그해보세요.</div>
<p id="result3"></p>
</body>
</html>
결과:
- 요소를 마우스로 드래그하면 드래그한 방향과 거리에 따라 이동한 픽셀 수가 출력됩니다.
설명:
이 예제에서는 마우스를 누른 채로 드래그한 거리에 따라 이동한 픽셀 수를 계산하여 출력합니다. 이를 통해 마우스 드래그 동작에 따라 다양한 이벤트 처리를 할 수 있습니다.
예제 4: 이벤트 위임을 통한 여러 요소의 수직 좌표 출력
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 마우스 이벤트의 수직 위치 파악하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#container4').on('click', '.target', function(event){
var pageY = event.pageY;
var targetId = $(
this).attr('id');
$('#result4').text(targetId + '의 위치: ' + pageY);
});
});
</script>
</head>
<body>
<div id="container4">
<div id="target4-1" class="target" style="width: 100px; height: 50px; background-color: lightpink;">요소 1</div>
<div id="target4-2" class="target" style="width: 150px; height: 70px; background-color: lightblue;">요소 2</div>
<div id="target4-3" class="target" style="width: 120px; height: 60px; background-color: lightgreen;">요소 3</div>
</div>
<p id="result4"></p>
</body>
</html>
결과:
- 각 요소를 클릭하면 해당 요소의 수직 좌표가 출력됩니다.
이 예제에서는 이벤트 위임을 활용하여 여러 요소에 대한 클릭 이벤트를 한 번에 처리합니다. 각 요소를 클릭할 때 해당 요소의 수직 좌표를 출력하여 마우스 이벤트의 위치를 파악할 수 있습니다.
jQuery의 event.pageY 속성을 활용하면 마우스 이벤트가 발생한 위치의 수직 좌표를 쉽게 파악할 수 있습니다. 이를 활용하여 다양한 마우스 이벤트를 처리하고 웹 애플리케이션을 더욱 상호작용적으로 만들 수 있습니다.
'프로그래밍' 카테고리의 다른 글
jQuery 이벤트 객체의 relatedTarget 속성 활용하기 (0) | 2024.04.02 |
---|---|
jQuery로 이벤트의 기본 동작 막기 (0) | 2024.04.02 |
jQuery event.pageX 속성을 활용한 마우스 이벤트 처리 (0) | 2024.04.02 |
jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리 (0) | 2024.04.02 |
jQuery event.metaKey 속성을 활용한 메타키 확인 (0) | 2024.04.02 |