Question

我是否应该按如下方式调用JavaScript方法？

onClick="Javascript:MyMethod();"

或者我可以这样称呼它：

onClick="MyMethod();"

有什么不同吗？

Answer 1

onclick属性的值是代码，而不是URI，所以这是正确的（尽管不是唯一的方法，请参见下面的正切＃1）：

onClick="MyMethod();"

这不正确但很大程度上无害：

onClick="Javascript:MyMethod();"

有时候人们会认为后者正在使用javascript协议，就像链接一样，但事实并非如此。它完全在做其他事情。 onclick属性中的代码语言是在页面级别定义的（默认为JavaScript），因此您实际执行的操作是在JavaScript代码中声明标签，以及然后打电话给MyMethod。 JavaScript有标签（参见下面的正切＃2），尽管它们使用不多。

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

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

在那里，由于我们将代码放在需要URI的位置，我们必须使用javascript协议指定URI，因此浏览器知道我们正在做什么。 javascript是一个协议（如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。请注意，在我们设置点击处理程序的地方，我们将一个函数引用而不是字符串分配给tab div上的onclick。

我实际上不会在上面使用onclick，我会通过addEventListener（标准）/ attachEvent（Microsoft）函数使用DOM2处理程序。但我不想进入标准与微软的关系。如果你开始做一些不引人注目的JavaScript，你也不要使用库来处理这些东西（jQuery，Prototype，Closure，whatever）。< / p>

切线＃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

Answer 2

这是一个不引人注目的选择。内联JavaScript代码使您的HTML难以遵循。将JavaScript（逻辑）与HTML（演示文稿）分开是可行的方法。在jQuery中它将是这样的：

$(function() {
    $('#the-element').click(function() {
        MyMethod();
    });
});

将它放在头脑或外部脚本文件中。最好定义MyMethod。现在你的元素是干净的，你的所有方法调用都位于同一个地方，而不是通过HTML传播。

Answer 3

onclick已经假定您正在执行JavaScript代码，因此不需要javascript:伪网址。

Answer 4

不同之处在于第一个是错误的。

第一个恰好工作，因为someidentifier:恰好是JavaScript中标签的语法，但由于那里不需要标签，所以没有必要添加标签。

Answer 5

AFAIK，您在此处定义名为Javascript的跳转标签。你不应该这样做。这对通话没有影响。这是要走的路：

onClick="MyMethod();"

调用JavaScript方法的正确方法

5 个答案: