调用JavaScript方法的正确方法

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使用上下文来确定单击哪个选项卡并相应地执行操作,并hookUpTabs在DOM准备就绪后立即调用.请注意,在我们设置单击处理程序的地方,我们将为onclicktab选项卡上的函数引用而不是字符串赋值.

我实际上不会onclick在上面使用,我会通过addEventListener(标准)/ attachEvent(微软)函数使用DOM2处理程序.但我不想进入标准与微软的关系.如果你开始做不引人注目的JavaScript,你也不要使用库来处理那些东西(jQuery,Prototype,Closure,等等).

切线#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);
    }
}

实例

Answer 2

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

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

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