的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功能參數

回答

相關問題