從JavaScript創建的按鈕執行功能的正確方法？

我在使用Javascript的網頁上創建一些簡單的按鈕，並且在點擊它們時需要調用一個函數。我想出了以下搜索答案爲基礎的例子。但是，創建一個函數來調用函數似乎是錯誤的。我無法以其他方式直接調用腳本中其他位置的函數「click_button」。從JavaScript創建的按鈕執行功能的正確方法？

這工作：

my_button.onclick = function(){ 
    click_button(my_button.value); 
    }

這些不工作：

// This executes on first run, but not when clicked. 
my_button.onclick = click_button(my_button.value); 
// This doesn't do anything when clicked. 
my_button.onclick = "click_button(my_button.value);";

是頂級的例子中，正確的方法來調用JavaScript中點擊一個按鈕的功能？

感謝您的任何幫助。

來源

2017-03-04 Tige Phillips

第一個示例是正確的，您還可以使用此語法添加事件偵聽器my_button.addEventListener（「click」，myScript）;查看[this]（https://www.w3schools.com/jsref /event_onclick.asp） –

僅僅因爲'onclick'應該是'callback（function）'在觸發/觸發時工作。 – Xlee

在第一個示例中，您爲單擊按鈕時應調用的函數分配一個引用。這是對的。

在第二個示例中，您將click_button函數的結果分配給onclick。因此，當您的代碼被引擎讀取時，它會執行您的click_button功能並將結果值分配給onclick。所以當你點擊你的按鈕時，沒有函數可以執行，只是一個值。

在第三個示例中，您只需爲onclick指定一個字符串。這是行不通的。

所以是第一種方法是正確的方法。

來源

2017-03-04 01:02:55

讓我解釋爲什麼你最後的兩個例子做不工作啓動：

my_button.onclick = click_button(my_button.value);

這將執行click_button()功能向右走，並分配任何函數返回my_button.onclick

my_button.onclick = "click_button(my_button.value);";

這只是將my_button.onclick的值設置爲一個字符串。該按鈕的onclick屬性不期待帶有JavaScript代碼的字符串，並且它不會以這種方式評估它。

你可以看到onclick財產如何在這裏工作： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

分配給onclick的功能將被傳遞一個MouseEvent。你click_button函數接受一個值作爲參數，所以截至目前，你不能簡單地本身的功能分配給onclick像這樣：

my_button.onclick = click_button // won't be given my_button.value

因爲傳遞是值將是一個MouseEvent，不是你期望。

如果修改了click_button功能不需要值的參數，那麼你可以這樣做：

function click_button() { 
    // Do stuff using this.value or my_button.value directly 
} 

my_button.onclick = click_button

否則，如果你希望能夠通過my_button.value的功能，你需要用它在另一個函數中，就像你在第一個例子中做的那樣。

由於@Mikey在評論中指出的那樣，你可以通過使用this.value功能的內部獲得的價值。 MDN文檔聲明this將被設置爲該函數內的元素。

來源

2017-03-04 01:02:20 andreyrd

很好的答案。在你的最後一個例子中，他也可以在函數內用'this.value'訪問值。 – Mikey

@Mikey哦！太棒了，我沒有意識到這一點。現在我在MDN文檔中看到它確實提到了「這個」將成爲元素。我會更新我的答案。 – andreyrd

從JavaScript創建的按鈕執行功能的正確方法？

回答

相關問題