问为什么在HTML语言中使用onClick()是一种糟糕的做法？

EN

如果您使用的是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;
    });
});

这可以让你给任何链接添加一个弹出窗口，只需给它一个popup类即可。

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

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东西！对可重用性的支持！

这也意味着，如果后来我认为弹出窗口是不好的做法，(它们确实是！)我想用lightbox风格的模式窗口替换它们，我可以更改：

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

至

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

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

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

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

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

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

如果您在一个生命周期中声明function doSomething(){}，然后在您的HTML页面中将doSomething()设为元素的onClick操作，您将会得到一个错误。

另一方面，如果您在该生命周期中为该元素创建了一个eventListener，并在侦听器检测到单击事件时调用doSomething()，那么就很好了，因为侦听器和doSomething()共享该生命周期的作用域。

对于代码最少的小型web应用程序来说，这并不重要。但是，如果您渴望编写大型的、可维护的代码库，那么onclick=""是您应该努力避免的习惯。

我想你的问题会引发讨论。一般的想法是，将行为和结构分开是很好的。此外，afaik，一个内联的点击处理程序必须被eval引导才能‘成为’真正的javascript函数。这是相当老套的，尽管这是一个相当站不住脚的论点。啊，好吧，读一些关于它的@quirksmode.org