<div class="box"></div>

.box {
  margin: 0 auto;
  display: grid;
  width: 300px;
  height: 300px;
  color: white;
  background-color: DarkSlateGrey;
  text-align: center;
  place-items: center;
  user-select: none;
  font-size: 1.3rem;
  font-family: 'Helvetica', sans-serif;
  line-height: 2rem;
  cursor: pointer;
}

const displayCoords = function (event, props) {
  boxElem.innerText = 
      `${props.title}:\n Client X/Y: ${event.clientX}, ${event.clientY}`;
}

const addMoveHandler = function(event) {
  
  const props = { title: 'Mouse Position' };

  // add the handler as a property of addMoveHandler
  addMoveHandler.handler = function (event) {
    displayCoords(event, props);
  }
  
  boxElem.addEventListener('mousemove', addMoveHandler.handler);
};

// removing named moveHandler
const removeMoveHandler = function(event) {
  boxElem.removeEventListener('mousemove', addMoveHandler.handler);
  boxElem.innerText = '';
};

const boxElem = document.querySelector('.box');

boxElem.addEventListener('mousedown', addMoveHandler);
document.addEventListener('mouseup', removeMoveHandler);