2016-04-22 32 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); 
}); 
相關問題