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
}

这是fiddle。

Answer 2

1-您应该尽量避免在头部添加脚本，因为它会使渲染页面变慢。如果你真的需要这样做，你可能会寻找延迟/异步脚本。

2-您应该尝试将脚本置于底部，以使浏览器尽可能快地呈现所有html和css。

3-最后在底部，您应该在加载页面中调用。例如在jquery.ready中就像这个doc说的那样，搜索jquery ready事件。在那一刻，你应该通过调用按钮上的jquery选择器，搜索jquery选择器，最后添加click事件，搜索jquery click事件，然后在回调中处理你需要的内容，为你需要的按钮添加一个监听器

这是一个小提琴。

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

Jquery对某些人来说也是一个很好的填充物:)。

Answer 3

虽然 onclick 方法是一个非常好的方法，但是 it is no longer supported。

addEventListener 方法是最合适、最现代的方法。

有两种使用方式：

将现有函数连接到事件侦听器：

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

在事件侦听器中编写函数：

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 可以首先加载。

希望我能帮上忙。

使用onclick运行Javascript？

3 个答案: