将 onClick 处理程序放在标签中与放在 JS 代码中

Putting onClick handlers in tags vs. in JS code

假设我有两个按钮，像这样：

<input type="button" id="button1" value="click me 1" />
<input type="button" id="button2" value="click me 2" />

除了代码不同之外，将 onclick 属性放在其中一个上，并使用 jQuery 处理另一个会有什么区别？

HTML:

<input type="button" id="button1" value="click me 1" onclick="alert('Clicked button 1!');"/>
<input type="button" id="button2" value="click me 2" />

JS/jQuery:

$(document).ready(function() {
    $("#button2").click(function(){
        alert("Clicked button 2!");
    }); 
});

从本质上讲，这两个控件的功能没有区别 - 它们都将执行相同的命令。

但是，如果结构正确，您的网站应该最后加载页面的任何外部脚本（例如第二个示例）以减少加载时间。

基本上，虽然对于小规模的网页来说差异不明显，但第一个示例会导致在生成页面时加载函数调用，而第二个应该 在页面加载完成后加载 - 这意味着加载实际页面的时间会稍微少一些。

编辑：

然而，经过进一步研究，现代浏览器似乎更能处理这个过程，参见：Where should I put <script> tags in HTML markup?

他们完成同样的事情，但有一些不同：

  • HTML 中的事件绑定在创建元素时存在，而 jQuery 绑定的事件稍后添加，当文档完成加载并且 ready事件被触发。

  • jQuery 事件是多播的，即您可以将多个同类事件绑定到同一元素。

嗯，效果是一样的。但是还是有一些区别，比如： 当点击第一个按钮时触发第一个事件，内容在页面加载后加载，第二个事件当然在点击后被触发，但内容每时每刻都在初始化。