javascript - 调用 JavaScript 方法的正确方法

Question

<分区>

Answer 1

onclick 属性的值是代码，而不是 URI，所以这是正确的(虽然不是唯一的方法，请参见下面的切线 #1):

onClick="MyMethod();"

这是不正确但基本上无害:

onClick="Javascript:MyMethod();"

有时人们认为后者正在使用 javascript 协议(protocol)，就像在链接上一样，但事实并非如此。它完全在做其他事情。 onclick 属性中的代码语言是在页面级别定义的(默认为 JavaScript)，因此您实际做的是在 JavaScript 中声明一个标签代码，然后调用 MyMethod。 JavaScript 有标签(见下面的切线 #2)，尽管它们用得不多。

onclick 属性与链接上的 href 属性完全不同:

<a href="javascript:MyMethod();">

在那里，由于我们将代码放在需要 URI 的位置，我们必须使用 javascript 协议(protocol)指定 URI，以便浏览器知道我们在做什么。 javascript 是一种协议(protocol)(如 http 或 mailto)，Brendan Eich(JavaScript 的创建者)非常聪明地定义和注册(并实现)非常非常早，所以它得到了很好的支持。

最后:最好让 onclick 全部小写，而不是混合大小写，尽管只有在使用 XHTML 时才真正重要。

---

切线#1

也许有点离题，但是:使用 HTML 属性来连接处理程序是完全有效的，并且跨浏览器运行良好，但它会将 JavaScript 事件连接与 HTML 混合在一起。有些人认为这是一件好事，其他人则属于“不显眼的 JavaScript”方面，认为您应该稍后将所有内容连接起来。你做什么取决于你。当您的 HTML 设计人员和 JavaScript 编码人员不是同一个人时(这种情况在大型团队中经常发生)，这种不显眼的方法特别有用。

不显眼的方法基本上是说:不要为此使用 HTML 属性，稍后从脚本中使用。所以不是

<ul id='tabset'>
    <li onclick="setTab(1);">Tab 1</li>
    <li onclick="setTab(2);">Tab 2</li>
    <li onclick="setTab(3);">Tab 3</li>
</ul>

你可能有这样的 HTML:

<ul id='tabset'>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
</ul>

结合这个 JavaScript:

function hookUpTabs() {
    var tabset, tab;
    tabset = document.getElementById('tabset');
    for (tab = tabset.firstChild; tab; tab = tab.nextSibling) {
        if (tab.tagName == "LI") {
            tab.onclick = setTab; // Hooks up handler, but there are better ways
        }
    }
}

...其中 setTab 使用上下文来确定单击了哪个选项卡并采取相应的操作，并且在 DOM 准备就绪后立即调用 hookUpTabs。请注意，在我们设置点击处理程序的地方，我们将函数引用而不是字符串分配给选项卡 div 上的 onclick。

我实际上不会在上面使用 onclick，我会通过 addEventListener(标准)/attachEvent(微软)功能。但我不想讨论标准与微软的问题。而且你也不会，如果你开始使用不引人注目的 JavaScript，请使用一个库来为你处理这些东西( jQuery 、 Prototype 、 Closure 、 whatever )。

---

切线 #2

另一个有点离题的话题:那么，这些 JavaScript 标签是什么？规范中的详细信息一如既往，但这里有一个在循环中使用带有定向 break 语句的标签的示例:

var innerIndex, outerIndex;

// Label the beginning of the outer loop with the (creative) label "outerloop"
outerloop: for (outerIndex = 0; outerIndex < 10; ++outerIndex) {

    for (innerIndex = 0; innerIndex < 50; ++innerIndex) {

        if (innerIndex > 3) {
            break; // Non-directed break, breaks inner loop
        }

        if (innerIndex > 2 && outerIndex > 1) {
            // Directed break, telling the code that we want to break
            // out of the inner loop *and* the outer loop both.
            break outerloop;
        }

        display(outerIndex + ":" + innerIndex);
    }
}

Live Example