是否有在多个事件侦听器上执行逻辑的设计模式

const container = document.querySelector('div.container');
const draggable = document.querySelector('div.draggable');

const move = (x, y) => {

  x = state.fromX + (x - state.startX);
  y = state.fromY + (y - state.startY);

  // don't allow moving outside the container
  if (x < 0) x = 0;
  else if (x + draggable.offsetWidth > container.offsetWidth) x = container.offsetWidth - draggable.offsetWidth;
  
  if (y < 0) y = 0;
  else if (y + draggable.offsetHeight > container.offsetHeight) y = container.offsetHeight - draggable.offsetHeight;
  
  draggable.style.left = x + 'px';
  draggable.style.top = y + 'px';
};

const listen = (op = 'add') => 
  Object.entries(listeners).slice(1)
    .forEach(([name, listener]) => document[op + 'EventListener'](name, listener));

const state = new Proxy({}, {
  set(state, prop, val){
    const out = Reflect.set(...arguments);
    const ops = {
      startY: () => {
        listen();
        const style = getComputedStyle(draggable); 
        [state.fromX, state.fromY] = [parseInt(style.left), parseInt(style.top)];
      },
      dragY: () => move(state.dragX, state.dragY),
      stopY: () => listen('remove') + move(state.stopX, state.stopY),
    };
    // use a resolved Promise to postpone the move as a microtask so
    // the order of state mutation isn't important
    ops[prop] && Promise.resolve().then(ops[prop]);
    return out;
  }
});

const listeners = {
  mousedown: e => Object.assign(state, {startX: e.pageX, startY: e.pageY}),
  // here we first provide dragY to check that the order of props is not important
  mousemove: e => Object.assign(state, {dragY: e.pageY, dragX: e.pageX}),
  mouseup: e => Object.assign(state, {stopX: e.pageX, stopY: e.pageY}),
};

draggable.addEventListener('mousedown', listeners.mousedown);

html,body{
  height:100%;
  margin:0;
  padding:0;
}
div.draggable{
  position: absolute;
  padding:30px;
  border-radius:4px;
  background:#ddd;
  cursor:move;
  user-select: none;
  left: 15px;
  top: 15px;
}
div.container{
  left:15px;
  top:15px;
  background: #111;
  border-radius:4px;
  width:calc(100% - 30px);
  height:calc(100% - 30px);
  position: relative;
}

<div class="container">
  <div class="draggable">Draggable</div>
</div>