的JavaScript的addEventListener功能参数

我试图捕捉我的画布，每次鼠标点击的screenX和screenY价值，所以我用了addEventListener但我得到了一个有点困惑的事情是：的JavaScript的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) 
});

我很好奇的是，不管是什么parametersI有传递给函数（）在这里，它会一直返回窗口对象上的所有东西吗？我已阅读https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener上的文章，但并未涵盖此内容。所以我可以得到我的好奇心帮助吗？

来源

2017-05-24 mystreie

所以，你只是重命名函数参数名称？ – evolutionxbox

重命名参数不会更改其值。我不太清楚你想要达到的目标。 – Santi

是的，我在控制台做了相同的输出，只是想知道这是为什么？ – mystreie

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

在你的情况，你要设置为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>

来源

2017-05-24 15:45:45

感谢您在这些细节中的回复，现在我明白了，在我的情况下，当点击事件被触发时（因为用户只是“点击”浏览器）窗口对象引用会传递到我的回调函数中吗？ – mystreie

不，再一次，你是**不**获得对'window'对象的引用。您正在获取对'click' **事件**对象的引用。 'window'是浏览器中的全局对象。任何时候你想访问它，只需写'window'。 –

我还有一个关于：target.addEventListner（'event'，somefunction（））的问题;目标必须是用js实现的html或浏览器元素吗？只是想知道如果我在画布上绘制一个圆圈，并且我想让该圆形对象成为我的EventTarget，有没有办法做到这一点？或者只是指定每个ScreenX和ScreenY鼠标属性以使用？ – mystreie

当您定义一个函数时，您将变量名称给参数。

这些名字只在函数内部有效。

赋予这些变量的值由决定，无论调用函数。

你不会期望之间不同的结果：

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

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

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

来源

2017-05-24 15:44:37 Quentin

您也可以随时使用海关职能以这样的方式

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

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

来源

2017-05-24 16:03:42

的JavaScript的addEventListener功能参数

回答

相关问题