// Get a reference to the element you want to listen for the event on
const buttonElement = document.getElementById('myButton');

// Attach an event listener to the button element
buttonElement.addEventListener('click', function(event) {
  // The event object contains information about the event
  console.log('Event Type:', event.type);
  console.log('Event Target:', event.target);
  console.log('Event Timestamp:', event.timeStamp);
  console.log('Mouse X Coordinate:', event.clientX);
  console.log('Mouse Y Coordinate:', event.clientY);
  console.log('Key Code:', event.keyCode); // for keyboard events

  // Perform some actions based on the event
});


// Assuming you have an element with the id "dragElement"
const dragElement = document.getElementById('dragElement');

// Add a dragstart event listener to the element
dragElement.addEventListener('dragstart', function(event) {
  // Get the id of the element being dragged
  const elementId = event.target.id;

  console.log('Element ID being dragged:', elementId);
});


=====================================================================


Clicked element


    // Dragstart event listener for the draggable elements
function onDragStart(event) {
  event.dataTransfer.setData("text/plain", event.target.textContent.trim());
}

// Add dragstart event listeners to the draggable elements
const draggableElements = document.querySelectorAll('[draggable="true"]');
draggableElements.forEach(function(element) {
  element.addEventListener('dragstart', onDragStart);
});


  const draggedText = event.dataTransfer.getData("text/plain");