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

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

在您的情况下，您正在为click对象设置window事件处理程序，因此对click事件的引用将传递到您的回调函数中。没有什么可以做的改变，你可以把这个论点称为你喜欢的。 event对象的属性将取决于生成的事件对象的类型（即，对于与鼠标相关的事件，您将具有clientX和clientY等属性，但对于键盘相关事件，您将拥有keyCode和shiftKey等属性。只需记录事件本身或调试事件处理函数，您就可以检查所有可用的属性，但这些属性将根据您正在处理的事件类型而有所不同。

＆＃13;
＆＃13;
window.addEventListener("click",function(aNameThatIhaveChosen){ console.log("You have clicked at: " + aNameThatIhaveChosen.clientX + ", " + aNameThatIhaveChosen.clientY ); });
＆＃13;
<h1>Click anywhere</h1>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13;
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()); }
＆＃13;
<h1>Click anywhere</h1>
＆＃13;
＆＃13;
＆＃13;

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");

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

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

javascript addEventListener函数参数

3 个答案: