Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Event Listener Example</title>
  <style>
    .event-display {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
      
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
      
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
      
</head>
<body>  
<div id="navbarContainer"></div>

// Function to display event details in the eventDisplay div
    function displayEventDetails(eventType, eventDetails) {
      eventDisplay.innerHTML = `<b>${eventType} event:</b> ${eventDetails}`;
    }

// Click event
    button.addEventListener('click', function(event) {
      const eventDetails = `Button clicked at (${event.clientX}, ${event.clientY})`;
      displayEventDetails('Click', eventDetails);
    });

// Keydown event
    document.addEventListener('keydown', function(event) {
      const eventDetails = `Key pressed: ${event.key}`;
      displayEventDetails('Keydown', eventDetails);
    });

// Touchstart event
    button.addEventListener('touchstart', function(event) {
      const eventDetails = `Touch started at (${event.touches[0].clientX}, ${event.touches[0].clientY})`;
      displayEventDetails('Touchstart', eventDetails);
    });

// Mousemove event
    document.addEventListener('mousemove', function(event) {
      const eventDetails = `Mouse moved at (${event.clientX}, ${event.clientY})`;
      displayEventDetails('Mousemove', eventDetails);
    });
  </script>
</body>
</html>