为什么在HTML中使用onClick（）是一种不好的做法？

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

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

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

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

优点是

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

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

网页：

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

JS：

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

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

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

网页：

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

JS：

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

这样，您只需为其提供弹出式类，即可向任何链接添加弹出窗口。

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

网页：

 <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，这需要大量的复制和粘贴工作。