为什么使用"javascript:<code>"不好？

Question

可能重复:
您是否需要在onclick中指定javascript:

要在DOM事件上执行JavaScript,您可以使用以下内容:

<div onclick="alert('Alert');">Alert</div>?

这样的东西似乎也有效:

<div onclick="javascript: alert('Alert');">Alert</div>?

但是,我听说第二个例子是"坏",第一个例子应该在第二个例子中使用.

这不好吗？如果是这样,为什么这么糟糕？alert('Alert')和之间有什么区别javascript: alert('Alert')？

如何在<a>标签中使用它(如果它有任何不同)？

<a href="javascript: alert('Alert');">Alert</a>

编辑:为了澄清,我特别询问该javascript:部分,而不是我如何将内联JavaScript与我的标记混合在一起.对此感到抱歉.

Answer 1

_{哦,JavaScript的奇妙混乱世界.你发布的代码可能不会像大多数程序员认为的那样做.}

以下每行之间存在差异:

<a onclick="alert('Hello World!')"...>example</a> //V1
<a href="javascript: alert('Hello World!')"...>example</a> //V2
<a onclick="javascript: alert('Hello World')"...>example</a> //V3

虽然他们都会警觉Hello World!.

第一个(V1)具有click通过[onclick]属性绑定的内联事件.它还可能包含[href]在[onclick]属性执行后导航到另一个位置的属性,或者click代码中绑定的任意数量的其他事件,假设未阻止默认行为.

第二个(V2)将可执行javascript:URL设置为[href]属性.它还可能包含在外部脚本中绑定的[onclick]属性或其他click事件.

第一个和第二个示例(V1和V2)执行相同的代码,即:

alert('Hello World!')

第三个示例(V3)具有click通过[onclick]属性绑定的内联事件,就像V1一样,但是正在执行的代码是不同的.执行的代码是:

javascript: alert('Hello World')

虽然它看起来像一个javascript:网址,但它实际上只是在javascript中使用标签.

JavaScript中的标签对于跳过嵌套循环很有用,如下面的示例代码所示:

label: for (i = 0; i < 5; i++) { //labeled line
    for (j = 0; j < 5; j++) {
        console.log(i, j);
        if (i === 2 && j === 3) {
            break label; //this jumps out of both for loops
        }
    }
}

在大多数内联JavaScript中,它被滥用,因为作者不理解这三种格式之间的区别.

为什么使用javascript: <code>不好？

这是一个主要问题.它假定使用javascript: <code> 是不好的.

javascript: <code> 还不错.这是一个工具.工具本身并不好或坏,只有使用这些工具的人才是.你不会把锤子称为"坏",即使有人用它作为武器.

javascript: <code>有一些很好的用途.在大多数情况下,您不应该使用它,因为它是作业的错误工具,但是如果您正在编写书签,则需要使用该javascript: <code>格式.

此外,还有一些利基上下文,将javascript内联保留是有意义的.一个例子是向print页面添加一个简单的按钮:

<a href="#" onclick="window.print(); return false">Print</a>

虽然这个例子很容易被一个类取代并外化javascript:

<a href="#" class="print">Print</a>
<script>
     //jQuery used for brevity
     $(document).on('click', '.print', function () {
         window.print();
         return false;
     });
</script>