javascript:void(0) 的作用是什么

javascript:void(0) 在 HTML 和 JavaScript 中是一个常见的表达式，主要用来创建一个无操作的链接（通常是 标签）或者阻止默认事件处理。具体来说，它的作用有以下几点：

1. 阻止链接跳转 ：
   当你有一个 标签但不想让它跳转到另一个页面时，可以使用 javascript:void(0) 作为 href 属性的值。这样可以防止浏览器加载一个新的页面。

< a href="javascript:void(0)" onclick="doSomething()" >Click me< /a >

在这个例子中，点击链接时不会跳转，而是执行 doSomething() 函数。

1. 占位符 ： 在某些情况下，javascript:void(0) 也可以用作占位符，尤其是在你想先确保某段 JavaScript 代码有效执行，但暂时不确定 href 指向什么地址时。
2. 防止表单提交 ： 对于 表单，也可以使用 javascript:void(0) 来防止表单的默认提交行为，特别是在你想通过 JavaScript 进行自定义验证或处理时。

< form onsubmit="validateForm(); return false;" >
    < !-- form fields -- >
    < button type="submit" >Submit< /button >
< /form >

或者在某些情况下，通过添加一个隐藏的链接来阻止表单提交：

< form >
    < !-- form fields -- >
    < a href="javascript:void(0)" onclick="event.preventDefault(); validateForm();" >Submit< /a >
< /form >

但需要注意，更常见和推荐的做法是直接处理表单的 onsubmit 事件，如上面的第一个例子所示。

1. 确保 URL 不被篡改 ： 在一些用户生成内容（UGC）的场景下，为了避免用户插入恶意链接，开发者可能会使用 javascript:void(0) 作为默认链接，并在点击时通过 JavaScript 动态处理用户的输入。

虽然 javascript:void(0) 在很多场景下非常有用，但也要避免滥用。滥用会导致代码可读性和可维护性下降，特别是当链接或者按钮只是临时被禁用或者待处理时。在现代开发中，更倾向于使用事件监听器和阻止默认行为的方式来处理这些需求。

例如，可以使用 addEventListener 来处理点击事件，并调用 event.preventDefault() 来阻止默认行为：

< a id="myLink" href="#" >Click me< /a >

< script >
    document.getElementById('myLink').addEventListener('click', function(event) {
        event.preventDefault();
        doSomething();
    });
< /script >

这种方式更符合现代前端开发的最佳实践。