时间戳

首页 > 解决方案 > addEventListener 的命名事件处理程序的内部或外部定义之间的区别

javascript - 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有何不同？

标签： javascriptevent-handlingmouseevent

解决方案

来自 MDN：

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

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

相比之下：

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

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

推荐阅读