您可能在谈论不显眼的 Javascript，它看起来像这样：

<a href="#" id="someLink">link</a>

中央 javascript 文件中的逻辑如下所示：

$('#someLink').click(function(){
    popup('/map/', 300, 300, 'map'); 
    return false;
});

优点是

• 行为（Javascript）与表示（HTML）分离
• 没有语言混合
• 您正在使用像 jQuery 这样的 javascript 框架，它可以为您处理大多数跨浏览器问题
• 您可以一次向大量 HTML 元素添加行为而无需重复代码

如果您使用的是 jQuery，那么：

HTML：

 <a id="openMap" href="/map/">link</a>

JS：

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

这样做的好处是在没有 JS 的情况下仍然可以工作，或者如果用户中间单击链接。

这也意味着我可以通过再次重写来处理通用弹出窗口：

HTML：

 <a class="popup" href="/map/">link</a>

JS：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

这将允许您通过为其提供弹出类来向任何链接添加弹出窗口。

这个想法可以进一步扩展，如下所示：

HTML：

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

JS：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

我现在可以在整个网站上为大量弹出窗口使用相同的代码，而无需编写大量的 onclick 内容！是的，可重用性！

这也意味着，如果稍后我决定弹出窗口是不好的做法（它们是！）并且我想用灯箱样式的模态窗口替换它们，我可以更改：

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

到

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

我整个网站上的所有弹出窗口现在都完全不同。我什至可以进行特征检测来决定在弹出窗口上做什么，或者存储用户偏好以允许与否。使用内联 onclick，这需要大量的复制和粘贴工作。

它不好有几个原因：

• 它混合了代码和标记
• 以这种方式编写的代码通过 eval
• 并在全局范围内运行

最简单的方法是为元素添加一个name属性<a>，然后您可以执行以下操作：

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

尽管现代最佳实践是使用id名称而不是名称，并且使用addEventListener()而不是使用，onclick因为这允许您将多个函数绑定到单个事件。

对于非常大的 JavaScript 应用程序，程序员使用更多的代码封装来避免污染全局范围。为了使 HTML 元素中的 onClick 操作可以使用一个函数，它必须在全局范围内。

你可能见过这样的 JS 文件...

(function(){
    ...[some code]
}());

这些是立即调用函数表达式 (IIFE)，在其中声明的任何函数将仅存在于其内部范围内。

如果function doSomething(){}在 IIFE 中声明，然后doSomething()在 HTML 页面中执行元素的 onClick 操作，则会出现错误。

另一方面，如果您在该 IIFE 中为该元素创建一个 eventListener 并doSomething()在侦听器检测到单击事件时调用，则您很好，因为侦听器并doSomething()共享 IIFE 的范围。

对于代码量最少的小型网络应用程序，这无关紧要。但是，如果您渴望编写大型、可维护的代码库，onclick=""那么您应该努力避免这种习惯。

有几个原因：

1. 我发现分离标记有助于维护，即 HTML 和客户端脚本。例如，jQuery可以轻松地以编程方式添加事件处理程序。

2. 您提供的示例在任何不支持 javascript 或已关闭 javascript 的用户代理中都会被破坏。渐进增强的概念将鼓励/map/为没有 javascript 的用户代理创建一个简单的超链接，然后为支持 javascript 的用户代理以编程方式添加点击处理程序。

例如：

标记：

<a id="example" href="/map/">link</a>

Javascript：

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})