传递给 .click() 方法参数的参数是否始终是 Event 对象？答案

【问题标题】：Is the argument passed to .click() method parameter always the Event object?传递给 .click() 方法参数的参数是否始终是 Event 对象？
【发布时间】：2016-08-15 20:18:26
【问题描述】：

我只是想了解 .click() 方法中的参数是如何工作的。据我了解， .click() 方法将函数作为参数。

根据 jQuery API，.click() 可以接受两个参数：

([eventData], event handler)

然后事件处理函数可以带这个参数：

(Event eventObject)

这是否意味着 .click() 方法的函数参数总是期望“事件对象”被传递给它？

例如，对于下面的示例，我创建了一个随机对象，然后将其作为参数传递。 .click() 方法的函数参数似乎忽略了它是一个随机对象并继续将其用作“事件对象”。

var anObject = {
  "property1" : "someproperty"
};

$(document).click(function(anObject) {
  var x = anObject.pageX;
  var y = anObject.pageY;

  logClicks(x, y);
});

var logClicks = function(x, y) {
  console.log("x: " + x + " y: " + y)
}

问题是，幕后发生了什么？为什么会这样？

编辑：

我对@987654324@ 参数以及事件处理程序如何使用它并不感到困惑。更多关于它的函数参数如何将您传递给它的任何参数转换为保存事件对象的变量。

【问题讨论】：

标签： javascript jquery events javascript-events event-handling

【解决方案1】：

您将匿名函数作为参数传递给.click() 函数。

因此，该函数具有不同的作用域，anObject 不是您全局声明的内容，而是 jQuery API 实际传递的内容，它是一个事件。

var anObject = {
  "property1" : "someproperty"
};

$(document).click(function aNewFunctionWithHisOwnScope(anObject) {
  // here anObject references an Event
  x = anObject.pageX;
  y = anObject.pageY;

  logClicks(x, y);
});

// here anObject references again your defined anObject

所以最后，是的：它总是是一个事件

编辑，因为我可能还不清楚：

您的anObject var 可以从匿名函数内部获得，因为它就像一个全局变量。但由于它们具有同名，在函数内部使用最后一个引用，因此使用的值（函数内部）是作为参数传递的值，而函数外部是“全局” anObject 保持其价值。

【讨论】：

你的意思是匿名函数没有访问 anObject 对象的权限？
它有访问权限。但由于它们具有相同的名称，它将使用您传递的名称在本地覆盖它
@catandmouse 我会补充一点：使用你传递的那个实际上是由 jQuery 传递的，是一个 Event ;)

【解决方案2】：

这是否意味着 .click() 方法的函数参数总是期望“事件对象”被传递给它？

是的，传递给事件处理函数的参数将始终是一个 jQuery 事件对象。

您的困惑似乎与click() 方法的([eventData], event handler) 签名有关。在这种情况下，第一个参数用于向提供给事件处理程序的event 对象的data 参数添加一个值。对于您问题中的代码，您将使用以下代码：

var anObject = {
  "property1" : "someproperty"
};

$(document).click(anObject, function(e) {
  var x = e.pageX;
  var y = e.pageY;
  var data = e.data.property1;
  logClicks(data, x, y);
});

var logClicks = function(data, x, y) {
  console.log(data, x, y)
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

click([eventData], event handler) 中的第一个参数需要是 eventData，它将进一步传递给事件处理程序，稍后您可以使用 event.data 访问该数据：

$(document).click(anObject, function(e) {
  x = e.pageX;
  y = e.pageY;

  // access the object passed as e.data
  console.log(e.data.property1);

  logClicks(x, y);
});

【讨论】：