pagex and pagey method in jquery for events

pageX and pageY properties for events:

event.pageX returns the position of the mouse relative to the left edge of the document.
event.pageY returns the position of the mouse relative to the top edge of the document.
mousemove() works when I move the mouse inside an element.
append() inserts at the end of the selected element the html code or embedded text inside the function

In the following example we move the mouse inside a square conditioned with css styles. With the function mousemove we detect the movement of the mouse with pageX and pageY we detect the position of the event.
With the function click, when clicking with the mouse inside we add with the function append the position of the mouse in that instant, using pageX and pageY we detect the position of the event. mouse at that moment, using pageX and pageY.

<div id="main" style="width:200px;height:200px;background-color:red;"></div>
<div id="show"></div>
<!--Script jQuery-->
<script>
  $(document).ready(function () {
    $('#main').mousemove(function(event) {
      $('#show').text(
        'Current mouse position X: '+event.pageX+
        ' | Current mouse position Y: '+event.pageY
      );
    });
    $('#main').click(function(event) {
      $('#show').append('<p>Position Selected X: '+event.pageX+' - Y: '+event.pageY+'</p>');
    });
  });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>