为什么在HTML中使用onclick()是一种糟糕的做法？

Question

为什么在HTML中使用onclick()是一种糟糕的做法？我多次听说使用JavaScript事件，例如onClick()，在HTML中是一种不好的实践，因为它不利于语义。我想知道缺点是什么，以及如何修复下面的代码？<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

Answer 1

如果您正在使用jQuery，那么：

HTML：

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

联署材料：

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

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

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

HTML：

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

联署材料：

$(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>

联署材料：

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

现在，我可以使用相同的代码在我的整个网站上的许多弹出窗口，而不必编写大量的点击材料！可重用性太好了！

这也意味着，如果稍后我决定弹出窗口是错误的做法，(他们是！)如果我想用一个Lightbox样式的模态窗口来代替它们，我可以更改：

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

到

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

我在整个网站上的弹出窗口现在都完全不同了。我甚至可以做特征检测来决定在弹出窗口上做什么，或者存储用户偏好以允许或不允许他们。随着内联点击，这需要一个巨大的复制和粘贴努力。

Answer 2

这是不好的，有几个原因：

• 它混合了代码和标记。
• 用这种方式编写的代码经过

  eval

• 并在全局范围内运行。

最简单的方法是添加一个name归因于<a>元素，则可以执行以下操作：

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

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