addEventListener 的命名事件处理程序的内部或外部定义之间的区别

如何解决addEventListener 的命名事件处理程序的内部或外部定义之间的区别

在下面的示例中，当 mouseup 事件发生时，球正如预期的那样被放下：

ball.ondragstart = function() {
  return false;
};

ball.onmousedown = function(e) {
  let ballRect = ball.getBoundingClientRect();
  let shiftX = e.pageX - ballRect.left;
  let shiftY = e.pageY - ballRect.top;

  ball.style.position = "absolute";
  ball.style.zIndex = 1000;
  document.body.append(ball);

  function moveball(x,y) {
    ball.style.left = x + "px";
    ball.style.top = y + "px";
  }

  moveball(e.pageX - shiftX,e.pageY - shiftY);

  document.addEventListener('mouseup',() => {
    document.removeEventListener('mousemove',onmousemove);
    ball.onmouseup = null;
  });

  function onmousemove(e) {
    moveball(e.pageX - shiftX,e.pageY - shiftY);
  }

  document.addEventListener('mousemove',onmousemove);
}

#court {
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  background-color: lightgreen;
  border: 1px solid green;
  border-radius: 10px;
}
#ball {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: red;
  position: absolute;
}

<div id="court">
  <div id="ball">
  <div>
</div>

但是当 onmousemove 函数定义放在 addEventListener 函数中时，当 mouseup 事件发生时，球不会掉下来（与预期相反）：

document.addEventListener('mousemove',function onmousemove(e) {
  moveball(e.pageX - shiftX,e.pageY - shiftY);
});

在 addEventListener 内部或外部定义命名事件处理程序有何不同？

解决方法

来自 MDN：

函数表达式的名称只能在函数的 身体。尝试在函数体外使用它会导致 错误或未定义。

var y = function x() { return "Hello"; };
alert(x()); // throws an error

相反：

函数声明会创建一个与函数名相同的变量 函数名。因此，不像那些由命名函数定义的 表达式，由函数声明定义的函数“可以是 在它们定义的范围内通过它们的名称访问”：

function x() { return "Hello"; };
alert(x()); // Hello