Quando avaliados como JavaScript, os dois códigos farão a mesma coisa: avaliar para undefined
(que é o que o operador void
faz). Na prática, o efeito disso é o mesmo: nada. A diferença entre os dois casos é meramente sintática.
Conforme expliquei aqui, todo código colocado dentro de um attribute event listener é interpretado como código JavaScript normalmente (com algumas diferenças, já explicadas na pergunta).
Desse modo, se você quiser comparar essas duas sequências inseridas em um atributo de evento como onclick
, deverá compará-las como código JavaScript. Para isso, podemos comparar a árvore sintática (AST) dos dois. Utilizei o AST explorer para chegar nos resultados que deixarei ao final da pergunta como anexo.
Quando avaliado como JavaScript, javascript:void(0)
é basicamente composto por uma expressão (void(0)
) identificada pelo label javascript
. O label não é um recurso muito comum de ser encontrado em código JavaScript visto que seu uso é decerto raro. A documentação explica como funciona.
Se estiver falando de JavaScript, void(0)
e javascript:void(0)
não possuem diferenças em questão de efeito, apenas sintática, como se pode verificar no anexo ao final da resposta. É por isso que o linter pede para que se remova o label javascript
— como a sequência no atributo onclick
denota um código JavaScript, o label nada está fazendo nesse caso.
Por conta disso, presumo ter havido uma confusão. Embora, em atributos de evento (tais como onclick
), o prefixo javascript:
ser sintaticamente correto (e útil, em alguns casos), quando a sequência é interpretada como um link, o prefixo javascript:
é utilizado (e necessário) para denotar que o link trata-se de um código JavaScript.
Desse modo, tratando-se do atributo href
de elementos <a>
, há diferença entre javascript:void(0)
e void(0)
, uma vez que:
<a href="javascript:void(0)"> ... </a>
indica uma âncora que contém um link que executa código JavaScript (nesse caso, void(0)
). Portanto, trata-se de um endereço válido.
<a href="void(0)"> ... </a>
indica uma âncora que contém um link inválido. void(0)
não é um URL válido.
Em suma, a diferença existe de acordo com a forma como javascript:void(0)
e void(0)
são interpretados:
- Se forem interpretados como JavaScript (o que ocorre em atributos de evento como
onclick
), a diferença é meramente sintática, já que o efeito é o mesmo.
- Se forem interpretados como um URL (o que ocorre, por exemplo, no atributo
href
de um elemento <a>
), javascript:void(0)
é um link válido que denota a avaliação do JavaScript void(0)
, enquanto void(0)
é um link inválido que, portanto, não fará nada.
Anexo: Diferença sintática de código JavaScript
Para javascript:void(0)
{
"type": "Program",
"start": 0,
"end": 18,
"body": [
{
"type": "LabeledStatement",
"start": 0,
"end": 18,
"body": {
"type": "ExpressionStatement",
"start": 11,
"end": 18,
"expression": {
"type": "UnaryExpression",
"start": 11,
"end": 18,
"operator": "void",
"prefix": true,
"argument": {
"type": "Literal",
"start": 16,
"end": 17,
"value": 0,
"raw": "0"
}
}
},
"label": {
"type": "Identifier",
"start": 0,
"end": 10,
"name": "javascript"
}
}
],
"sourceType": "module"
}
Veja que se trata de uma expressão etiquetada com o label javascript
.
Para void(0)
{
"type": "Program",
"start": 0,
"end": 7,
"body": [
{
"type": "ExpressionStatement",
"start": 0,
"end": 7,
"expression": {
"type": "UnaryExpression",
"start": 0,
"end": 7,
"operator": "void",
"prefix": true,
"argument": {
"type": "Literal",
"start": 5,
"end": 6,
"value": 0,
"raw": "0"
}
}
}
],
"sourceType": "module"
}
Veja que se trata apenas de uma expressão.