javascript addEventListener函数参数

Question

我试图在每次鼠标点击我的画布时捕获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)
});

我很好奇，无论我在这里传递给函数（）的是什么参数，它总是会返回窗口对象上的所有内容吗？ 我已经阅读了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> 

Answer 2

您也可以通过以下方式使用海关功能：

 window.addEventListener("click",function(event){
    yourCustomFuction(ctx, event.screenX /* .. or other params */);
 });

function yourCustomFuction(a, b)
{
    console.log(a);
    console.log(b);
}

Answer 3

定义函数时，可以为参数指定变量名称。

这些名称仅在函数内部有用。

赋予这些变量的值由函数的任何调用确定。

你不会期望在以下方面有不同的结果

function myFunction(a_variable_name) { 
    alert(a_variable_name);
}
myFunction("A string");

和

function myFunction(a_DIFFERENT_variable_name) { 
    alert(a_DIFFERENT_variable_name);
}
myFunction("A string");

触发事件时，浏览器将调用事件处理函数。 它传递的第一个参数将是一个事件对象。

存储第一个参数的变量的名称将是您设置的任何名称。