如何在 vanilla javascript 中用更好的替代品替换 onclick？

Question

我编写了以下代码并且它有效，但是人们告诉我不要使用 onclick。 在这种情况下如何实施替代方案？ 我正在用“块”类替换“隐藏”类，反之亦然。 在生产中使用它是错误的，还是有更好的选择，正如人们向我提到的那样。

 function myFunction() { var element = document.getElementById("menu"); if (element.classList.contains("hidden")) { element.classList.replace("hidden", "block"); } else if (element.classList.contains("block")) { element.classList.replace("block", "hidden"); } }

 .hidden { display: none; } .block { display: block; } .icon { fill: currentColor; height: 24px; width: 24px; }

 <button onclick="myFunction()"> <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> <div id="menu" class="hidden"> <p>I'm no longer hidden.</p> </div>

Answer 1

内联点击属性的问题在于它们的范围规则非常奇怪且不直观，并且需要全局污染。 使用 Javascript 选择元素并改用addEventListener 。

您还可以使用classList.toggle而不是在两个不同的类之间交替； .block类没有用，因为<div>的普通display已经是block 。

 document.querySelector('button').addEventListener('click', () => { document.getElementById("menu").classList.toggle('hidden'); });

 .hidden { display: none; } .icon { fill: currentColor; height: 24px; width: 24px; }

 <button> <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> <div id="menu" class="hidden"> <p>I'm no longer hidden.</p> </div>

如果您有多个按钮并且无法轻松定位要附加侦听器的按钮，则给它一个类，以便您可以使用querySelector定位它：

 document.querySelector('.hamburger').addEventListener('click', () => { document.getElementById("menu").classList.toggle('hidden'); });

 .hidden { display: none; } .icon { fill: currentColor; height: 24px; width: 24px; }

 <button class="hamburger"> <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> <div id="menu" class="hidden"> <p>I'm no longer hidden.</p> </div>

Answer 2

请参阅为什么在 HTML 中使用 onClick() 是一种不好的做法？ .

以这种方式讨论Unobtrusive JavaScript ：

优点是行为（Javascript）与表示（HTML）分离

没有语言混合

您正在使用像 jQuery 这样的 javascript 框架，它可以为您处理大多数跨浏览器问题

您可以一次向大量 HTML 元素添加行为而无需重复代码

好消息是你不需要做太多的事情来改造你的代码，你只需要：

给你的按钮一个唯一的标识符（ id ）
侦听与该唯一id关联的click事件
单击它时运行myFunction

这是您的代码，但经过改造：

 <!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Untitled</title> <style> .hidden { display: none; } .block { display: block; } .icon { fill: currentColor; height: 24px; width: 24px; } </style> </head> <body> <button id="btnHideShow"> <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <title>Menu</title> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> <div id="menu" class="hidden"> <p>I'm no longer hidden.</p> </div> <script> function myFunction() { var element = document.getElementById("menu"); if (element.classList.contains("hidden")) { element.classList.replace("hidden", "block"); } else if (element.classList.contains("block")) { element.classList.replace("block", "hidden"); } } document.getElementById("btnHideShow").addEventListener("click", myFunction); </script> </body> </html>

这里还有一个JSFiddle可以查看。

如何在 vanilla javascript 中用更好的替代品替换 onclick？

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-01-09 00:14:17

解决方案2
2 2020-01-09 00:16:48

如何在 vanilla javascript 中用更好的替代品替换 onclick？

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-01-09 00:14:17

解决方案2 2 2020-01-09 00:16:48

解决方案1
2 已采纳 2020-01-09 00:14:17

解决方案2
2 2020-01-09 00:16:48