2024-10-16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
// mousemove() : 선택한 요소의 영역에서 마우스를 움직일 때 마다 이벤트가 발생함.
// 형식) $("요소 선택").mousemove(function(매개변수) {...});
// 형식) $("요소 선택").on("mousemove", function(매개변수) {...});
$(function() {
$(document).on("mousemove", function(e) {
// document : 선택 하려는 요소(문서전체)
// function(e) : 이벤트 리스너, 값을 받는 argument로서 작용
let x = e.pageX; // 마우스의 x 좌표값을 구함.
let y = e.pageY; // 마우스의 y 좌표값을 구함.
$("h2").text("x 좌 표 : " +x+" / y 좌표 : "+y);
});
});
</script>
</head>
<body>
<h2></h2>
</body>
</html>
'JQuery > 기초 내용 정리' 카테고리의 다른 글
| JQuery(Event)_07 (0) | 2024.10.16 |
|---|---|
| JQuery(Event)_06 (0) | 2024.10.16 |
| JQuery(Event)_04 (0) | 2024.10.16 |
| JQuery(Event)_03 (0) | 2024.10.16 |
| JQuery(Event)_02 (0) | 2024.10.16 |