Как изменить объект события перед выполнением функции обратного вызова события DOM

var button = document.getElementById('myButton');
button.addEventListener("click", myModifiedFunction);

function myModifiedFunction(event) {
  // The clientX and clientY properties are read-only
  const { clientX, clientY, ...rest } = event;
  
  // We need to make a copy of the event object information
  const eventCopy = { clientX, clientY, ...rest };
  
  // Mutate the (x, y) coordinates with an offset of (1,000, 1,000)
  eventCopy.clientX += 1000;
  eventCopy.clientY += 1000;
  
  // Call the original handler
  myFunction(eventCopy);
}

// Original click handler callback
function myFunction(event) {
  const point = {
    x: event.clientX,
    y: event.clientY
  };
  console.info(`Point: ${JSON.stringify(point)}`);
}

<button onclick = "myFunction(event)">CLICK</button>
<button id = "myButton">CLICK (MODIFIED)</button>

var button = document.getElementById('myButton');
button.addEventListener("click", myModifiedFunction);

function myModifiedFunction(event) {
  // We need to make a copy of the event object information
  const eventCopy = cloneEvent(event);
  
  // Mutate the (x, y) coordinates with an offset of (1,000, 1,000)
  Object.assign(eventCopy, {
    clientX: eventCopy.clientX + 1000,
    clientY: eventCopy.clientY + 1000
  });

  // Call the original handler
  myFunction(eventCopy);
}

// Original click handler callback
function myFunction(event) {
  const point = {
    x: event.clientX,
    y: event.clientY
  };
  console.info(`Point: ${JSON.stringify(point)}`);
}

// Adapted from: https://stackoverflow.com/a/39669794/1762224
function cloneEvent(e) {
  if (!e) return;
  const clone = new Function();
  for (let p in e) {
    let d = Object.getOwnPropertyDescriptor(e, p);
    if (d && (d.get || d.set)) Object.defineProperty(clone, p, d);
    else clone[p] = e[p];
  }
  Object.setPrototypeOf(clone, e);
  return clone;
}

<button onclick = "myFunction(event)">CLICK</button>
<button id = "myButton">CLICK (MODIFIED)</button>

var button = document.getElementById('myButton');

const _add = HTMLElement.prototype.addEventListener;

// monkey patch our event handlers for our canvas element only

HTMLElement.prototype.addEventListener = function(name, fn, ...args){
    return _add.call(this, name, event => {
       if (event instanceof MouseEvent && event.target.closest('#\\$canvas')){
        return proxify(clientEvent, fn)(event);
       }
       return fn.call(this, event);
    });
};


// corrects clientX and clientY to be relative to the target element
const clientEvent = {
  clientX(val){
    const rect = this.target.getBoundingClientRect();
    return Math.round(val - rect.left);
  },
  clientY(val){
    const rect = this.target.getBoundingClientRect();
    return Math.round(val - rect.top);
  }
};

// add mouse handlers for the both canvases
'mousemove mousedown mouseup'.split(' ').forEach(name => $canvas.addEventListener(name, myFunction));
'mousemove mousedown mouseup'.split(' ').forEach(name => $canvas2.addEventListener(name, myFunction));

// Original cliekc handler callback
function myFunction(event) {
  const point = {
    x: event.clientX,
    y: event.clientY
  };
  $log.insertBefore(document.createElement('div'), $log.children[0]).textContent = `Point: ${JSON.stringify(point)}`;
}

function proxify(getters, fn) {
  return obj => {
    const proxy = new Proxy(obj, {
      get(target, prop, receiver){
        if (prop in getters){
          return getters[prop].bind(obj)(obj[prop]);
        }
        return obj[prop];
      }
    });
    return fn(proxy);
  }
}

[id=\$canvas]{
  margin:10px;
  background:lightgray;
  border-radius:4px;
  width:200px;
  height:100px;
}

[id=\$canvas2]{
  margin:10px;
  background:lightgray;
  border-radius:4px;
  width:200px;
  height:100px;
}

body{
  display:flex;
}

[id=\$log]{
  font-size:12px;
}

<div id = "$canvas"></div>
<div id = "$canvas2"></div>
<div id = "$log"></div>

function handleClickEvent(evt) {
  const mouseCoords = {
    x: evt.clientX,
    y: evt.clientY,
  };
  console.info({ mouseCoords });
}
function manipulateEventData([evt]) {
  // - manipulate the original event's data.
  Object.defineProperties(evt, {
    clientX: {
      value: evt.clientX + 1000,
    },
    clientY: {
      value: evt.clientY + 1000,
    },
  });
}

document
  .querySelector(`[data-original-handler]`)
  .addEventListener('click', handleClickEvent);

document
  .querySelector(`[data-modified-handler]`)
  .addEventListener(
    'click',
    modifyBefore(handleClickEvent, manipulateEventData)
  );

<button data-original-handler>original click handler</button>
<button data-modified-handler>modified click handler</button>

<script>
function modifyBefore(proceed, handler, target = null) {
  // - `target` equals the `this` context of the to be modified method.
  return (
    typeof proceed === 'function' &&
    typeof handler === 'function' &&

    function beforeType(...args) {
      // - the target/context of the initial modifier/modification time
      //   still can be overruled by a handler's apply/call time context.
      const context = this ?? target;

      // - invocation of the `before` handler.
      handler.call(context, args);

      // - proceed with invoking the original function/method.
      return proceed.apply(context, args);
    }
  ) || proceed;
}
</script>