2016-04-22 33 views
1

我只想了解.click()方法中的参数如何工作。根据我的理解,.click()方法将函数作为参数。是否将参数传递给.click()方法参数始终是Event对象?

按照jQuery的API,。点击()可以带两个参数:

([eventData], event handler) 

,并且随后事件处理函数可以把这个参数:

(Event eventObject) 

这是否意味着功能.click()方法的参数总是希望将“Event对象”传递给它?

就像下面的例子,我创建了一个随机对象,然后将它作为参数传递。 .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) 
} 

问题是,引擎盖下发生了什么?为什么会这样?

编辑:

我不那么困惑的[eventData]参数以及如何事件处理程序使用它。更多关于它的函数参数类型如何将您传递给它的任何参数转换为保存Event对象的变量。

回答

0

您正在将一个匿名函数作为参数传递给.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变种是从,因为它的匿名函数内部像一个全局变量。但是由于他们的同名,在函数内部使用了最后一个参考,因此使用的值(在函数内部)是作为参数传递的值,而在函数之外的'global'保留其值。

+0

你的意思是匿名函数没有访问anObject对象? – catandmouse

+0

它有权限访问。但是由于它们具有相同的名称,它会使用您通过的那个名称在本地覆盖它 – FredMaggiowski

+0

@catandmouse我将添加:使用您传递的实际上由jQuery传递并且是“Event”的那个) – FredMaggiowski

2

这是否意味着.click()方法的函数参数总会期望将“Event对象”传递给它?

是的,传递给事件处理函数的参数总是是一个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) 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

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); 
}); 
相关问题