[Duda] Al crear el evento no me muestra MouseEvent sino PointerEvent

Tengo un problema con el video del profe y es que en el video Comportamiento de formulario en el minuto 1:24, en la consola le muestra MouseEvent y las coordenadas pero al seguir el video en mi caso no se me muestra asi sino que me muestra PointerEvent y no muestra coordenadas, en su lugar Alto y Ancho

script.js:6 PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
script.js:8 JS
Se ha navegado a http://127.0.0.1:5500/?task=JCurso Python
script.js:3 <button type="submit" class="btnCreate" data-form-btn>…</button>

Comparto codigo de JS

const btn = document.querySelector("[data-form-btn]");

console.log(btn);

btn.addEventListener("click", function (evento) {
  console.log(evento);
  const input = document.querySelector("[data-form-input]");
  console.log(input.value);
});

Codigo HTML

<body>
  <main>
    <div class="mainCard">
      <div class="title"><img src="./assets/rocket.svg" /></div>
      <div>

        <form action="">
          <input type="text" name="task" placeholder="Nombre de la tarea" class="inputForm" autocomplete="off"
            data-form-input />
          <button type="submit" class="btnCreate" data-form-btn>
            Agregar <i class="fas fa-plus-circle"></i>
          </button>
        </form>
      </div>
      <ul class="cardsList">

        <li class="card">
          <div>
            <i class="far fa-check-square icon"></i>
            <span class="task">Hacer curso de DOM</span>
          </div>
          <i class="fas fa-trash-alt trashIcon icon"></i>
        </li>

        <li class="card">
          <div>
            <i class="far fa-check-square icon"></i>
            <span class="task">Hacer curso de JS<span>
          </div>
          <i class="fas fa-trash-alt trashIcon icon"></i>
        </li>

      </ul>
    </div>
  </main>
  <script src="script.js"></script>
</body>

¡Hola Estudiante!

Entiendo que estás teniendo un problema con el evento que estás creando en tu código JavaScript. En lugar de mostrar "MouseEvent" en la consola, te muestra "PointerEvent" y no muestra las coordenadas, sino "Alto" y "Ancho".

No te preocupes, esto se debe a que estás utilizando un evento de puntero en lugar de un evento de ratón. Los eventos de puntero son más modernos y pueden manejar diferentes tipos de dispositivos de entrada, como ratones, pantallas táctiles, lápices ópticos, etc.

En cuanto a las coordenadas, en lugar de mostrar las coordenadas del ratón, muestra el ancho y alto del evento de puntero. Esto se debe a que el evento de puntero proporciona información más detallada sobre el dispositivo de entrada y su estado.

Si deseas obtener las coordenadas del puntero, puedes utilizar las propiedades "clientX" y "clientY" del evento de puntero. Por ejemplo:

btn.addEventListener("click", function (evento) {
  console.log("Coordenadas X:", evento.clientX);
  console.log("Coordenadas Y:", evento.clientY);
});

De esta manera, podrás obtener las coordenadas del puntero al hacer clic en el botón.

Espero que esta explicación te haya ayudado a entender por qué estás viendo "PointerEvent" en lugar de "MouseEvent" y cómo obtener las coordenadas del puntero. Si tienes alguna otra pregunta, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)