使用 onclick 運行 Javascript？

Question

如果我設置以下內容：

<script type="text/javascript" src="https://test.com/abc"></script> 

在 head 標記之間，代碼在頁面啟動時運行。 有什么方法可以阻止它在啟動期間運行，而是使用 html 按鈕的 onclick 方法運行它？

Answer 1

在您的文件中獲取 javascript 並將其包裝在一個函數中。 然后，您可以將該功能分配給按鈕的onclick屬性。

<button onclick="myFunction()">Click Me</button>

還有你的劇本

function myFunction() { 
    //your existing code goes here
}

這是一個小提琴。

Answer 2

1- 您應該盡量避免在頭部添加腳本，因為它會使頁面渲染速度變慢。 如果你真的需要這樣做，你可以尋找延遲/異步腳本。

2- 您應該嘗試將腳本放在底部，以使瀏覽器盡可能快地呈現所有 html 和 css。

3- 最后，您應該在底部調用加載頁面。 例如在 jquery.ready 就像這個文檔說的那樣，搜索 jquery ready 事件。 在那一刻，您應該通過在按鈕上調用 jquery 選擇器，為您需要的按鈕添加一個偵聽器，搜索 jquery 選擇器，最后添加點擊事件，搜索 jquery 點擊事件，然后在該回調中處理您需要的內容.

這是一個小提琴。

[https://jsfiddle.net/d6zfqpc6/][1]

Jquery 也作為一個很好的 polyfill 對某些東西:)。

Answer 3

雖然onclick方法是一種很不錯的方式，但是已經不再支持了。

addEventListener方法是最合適和最現代的方法。

它可以通過兩種方式使用：

1. 將已經存在的函數連接到事件偵聽器：

    document.getElementByID("clickMe").addEventListener("click", myfunction);

2. 在事件偵聽器中編寫函數：

    document.getElementByID("clickMe").addEventListener("click", function() { //a function, for eg.: document.getElementById("p").innerHTML = "Hello World"; });

這是一個易於理解的示例片段：

 document.getElementById("clickme").addEventListener("click", function() { document.getElementById("p").innerHTML = "Hello World"; });

 <button id="clickme">Try it</button> <p id="p"></p>

另外，我建議您在頁面底部而不是頭部使用script ，以便首先加載 HTML 和 CSS。

---

希望我能幫上忙。