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

Question

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

我多次听说使用JavaScript事件，例如onClick()，在HTML中是一种不好的实践，因为它不利于语义。我想知道缺点是什么，以及如何修复下面的代码？

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>




Answer 1

如果您正在使用jQuery，那么：HTML：&nbsp;<a&nbsp;id="openMap"&nbsp;href="/map/">link</a>联署材料：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$("#openMap").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup('/map/',&nbsp;300,&nbsp;300,&nbsp;'map'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;});});这样做的好处是没有JS仍然工作，或者如果用户中间单击链接。这也意味着我可以通过再次将以下内容重写来处理通用弹出窗口：HTML：&nbsp;<a&nbsp;class="popup"&nbsp;href="/map/">link</a>联署材料：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(".popup").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup($(this).attr("href"),&nbsp;300,&nbsp;300,&nbsp;'map'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;});});这将允许您添加一个弹出窗口到任何链接，只要给它弹出类。这一想法还可以进一步推广，如下所示：HTML：&nbsp;<a&nbsp;class="popup"&nbsp;data-width="300"&nbsp;data-height="300"&nbsp;href="/map/">link</a>联署材料：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(".popup").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup($(this).attr("href"),&nbsp;$(this).data('width'),&nbsp;$(this).data('height'),&nbsp;'map'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;});});现在，我可以使用相同的代码在我的整个网站上的许多弹出窗口，而不必编写大量的点击材料！可重用性太好了！这也意味着，如果稍后我决定弹出窗口是错误的做法，(他们是！)如果我想用一个Lightbox样式的模态窗口来代替它们，我可以更改：popup($(this).attr("href"),&nbsp;$(this).data('width'),&nbsp;$(this).data('height'),&nbsp;'map');到myAmazingModalWindow($(this).attr("href"),&nbsp;$(this).data('width'),&nbsp;$(this).data('height'),&nbsp;'map');我在整个网站上的弹出窗口现在都完全不同了。我甚至可以做特征检测来决定在弹出窗口上做什么，或者存储用户偏好以允许或不允许他们。随着内联点击，这需要一个巨大的复制和粘贴努力。

Answer 2

这是不好的，有几个原因：它混合了代码和标记。用这种方式编写的代码经过eval并在全局范围内运行。最简单的方法是添加一个name归因于<a>元素，则可以执行以下操作：document.myelement.onclick&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;window.popup('/map/',&nbsp;300,&nbsp;300,&nbsp;'map'); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;};虽然现代的最佳实践是使用id而不是名字，并使用addEventListener()而不是使用onclick因为这允许您将多个函数绑定到单个事件。