javascript addEventListener函数参数

Question

我试图在每次鼠标点击我的 Canvas 时捕获 screenX 和 screenY 值，所以我使用 addEventListener 但是我有点困惑的是:

canvas = document.getElementById('theCanvas');
ctx = canvas.getContext('2d');

window.addEventListener("click",function(event){
  console.log(event)
});

在我找到 clientX 和 clientY 值之后，它指示我的鼠标在控制台屏幕上的 x/y 位置。当我尝试用任何其他词或变量替换事件参数时，我有点困惑，它仍然在控制台中执行相同的输出，就像:

window.addEventListener("click",function(b){
  console.log(b)
});

我很好奇，无论我在这里向 function() 传递什么参数，它是否总是返回 window 对象上的所有内容？我已经阅读了关于 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 的文章但它没有涵盖这一点。那么我的好奇心可以得到帮助吗？

Answer 1

浏览器触发事件​​就是这样，它们是由浏览器触发的。因此，您不能将自己的论点传递给他们。当一个典型的浏览器事件被触发并且该事件的处理程序已被注册时，已注册的处理程序将被用户代理自动调用并且该处理程序会自动传递一个参数，该参数引用了该事件触发了处理程序。从该事件中，您可以通过访问该参数来访问它具有的任何属性。参数名称仅供函数内的代码访问传递给函数的数据。 收到的名称不会改变传递给函数的数据。

在您的例子中，您正在为 window 对象设置一个 click 事件处理程序，因此对 click 事件的引用就是将被传递到您的回调函数中。你无法改变它，你可以随心所欲地称呼这个论点。 event 对象的属性将取决于生成的事件对象的类型(即对于鼠标相关事件，您将拥有 clientX 和 clientY 等属性，但对于与键盘相关的事件，您将拥有 keyCode 和 shiftKey 等属性。简单地记录事件本身或调试事件处理函数将允许您检查所有可用的属性，但同样，这些属性将根据您正在处理的事件类型而有所不同。

window.addEventListener("click",function(aNameThatIhaveChosen){
  console.log("You have clicked at: " + aNameThatIhaveChosen.clientX + ", " + aNameThatIhaveChosen.clientY );
});

<h1>Click anywhere</h1>

现在，在某些情况下，您可能还需要将其他参数传递给事件处理函数。这可以通过将处理函数包装在另一个函数中来实现。然后您可以将自动事件参数传递给实际的处理程序，但也可以传递您自己的数据:

window.addEventListener("click", function(evt){
  // We're just going to pass along the event argument to our custom function
  // and add additional arguments as necessary
  handleClick(evt, "My Custom Data", new Date());
});

// This is the function that will actually handle the click event.
// It will be passed the auto-generated event argument, but also 
// it will be passed any custom arguments we want.
// Note that while the function above recieved the event as "evt"
// and passed that object reference to this function as "evt", this
// function is recieving it as "event". What we call the input parameters
// doesn't change what those parameters really are, only how we access them.
function handleClick(event, customA, customB){
    console.log("You have clicked at: " + event.clientX + ", " + event.clientY );
    console.log("The custom data was: " + customA + ", " + customB.toLocaleTimeString());
}

<h1>Click anywhere</h1>