Właściwy sposób wywoływania metody JavaScript

Question

Czy jest jakiś powód, dla którego powinienem wywołać metodę JavaScript w następujący sposób?

onClick="Javascript:MyMethod();" 

Albo można po prostu nazwać tak:

onClick="MyMethod();" 

Czy jest jakaś różnica?

Answer 1

Wartość atrybutu onclick jest kod, a nie URI, więc jest to poprawne (choć nie jedynym sposobem można to zrobić, zobacz styczną nr 1 poniżej):

onClick="MyMethod();" 

To jest nieprawidłowe ale w dużej mierze nieszkodliwe:

onClick="Javascript:MyMethod();" 

Czasami ludzie myślą, jest on za pomocą protokołu javascript, jak na linki, ale tak nie jest. Robi coś zupełnie innego. Język kodu w atrybucie onclick jest zdefiniowany na poziomie strony (i domyślnie jest to JavaScript), a więc to, co faktycznie robisz, to deklarowanie w swoim kodzie JavaScript etykiety , a następnie wywoływanie MyMethod. JavaScript ma etykiety (patrz styczna nr 2 poniżej), ale nie są one używane zbyt wiele.

Atrybut onclick jest całkowicie odmienny od atrybutu href na linki:

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

tam, ponieważ jesteśmy kod gdzie oczekiwany jest URI oddanie, musimy określić URI przy użyciu protokołu javascript, więc przeglądarka wie, co robimy. javascript jest protokołem (takim jak http lub mailto), który Brendan Eich (twórca JavaScript) był na tyle sprytny, aby definiować i rejestrować (i implementować) bardzo, bardzo wcześnie, więc jest dobrze obsługiwany.

Wreszcie: najlepiej zrobić onclick wszystkie małe litery, a nie mieszane, choć tylko naprawdę ma znaczenie, jeśli używasz XHTML.

---

Tangent # 1

Może trochę nie na temat, ale: Używanie atrybutów HTML do podłączenia ładowarki jest całkowicie poprawny i dobrze współpracuje z różnymi przeglądarkami, ale intermixes swoją zdarzeń montażowe JavaScript z twoim HTML. Niektórzy widzą to jako dobrą rzecz, inni należą do "dyskretnego JavaScriptu" i myślą, że powinieneś wszystko później podłączyć. To, co robisz, zależy od ciebie. Dyskretne podejście jest szczególnie przydatne, gdy twoi projektanci HTML i twoi kodery JavaScript nie są tymi samymi osobami (co często zdarza się w dużych zespołach).

Dyskretne podejście zasadniczo mówi: Nie używaj atrybutów HTML do tego, zrób to później ze skryptu.Więc zamiast

<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> 

może mieć to HTML:

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

połączeniu z tym 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 
     } 
    } 
} 

... gdzie setTab wykorzystuje kontekst, aby dowiedzieć się, który został kliknięty i zakładka działaj odpowiednio, a hookUpTabs jest wywoływane, gdy tylko DOM jest gotowy. Zauważ, że tam, gdzie konfigurujemy moduł obsługi kliknięć, przypisujemy odwołanie do funkcji, a nie ciąg znaków do onclick na karcie div.

W rzeczywistości nie użyłbym onclick w powyższym, użyłbym obsługi DOM2 za pośrednictwem funkcji addEventListener (standard)/attachEvent (Microsoft). Ale nie chciałem wchodzić w standardowe i oparte na Microsoft rzeczy. A ty też nie, jeśli zaczniesz robić dyskretny JavaScript, skorzystaj z biblioteki, aby poradzić sobie z tymi rzeczami (jQuery, Prototype, Closure,, Closure, whatever).

---

Tangent # 2

Kolejnym styczna łagodnie off-topic: Więc, jakie są te etykiety JavaScript wtedy? Szczegóły w specyfikacji, jak zawsze, ale tutaj jest przykład użycia etykiety z reżyserii break oświadczenie w pętli:

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

onclick już zakłada, jesteś wykonywania kodu JavaScript, więc nie ma potrzeba pseudo-url javascript:.

Answer 3

AFAIK, definiujesz etykietę skoku o nazwie Javascript tutaj. Nie powinieneś tego robić. To nie ma znaczenia dla połączenia. To jest droga:

onClick="MyMethod();" 

Answer 4

Różnica polega na tym, że pierwsza jest błędna.

Pierwszy z nich działa, ponieważ someidentifier: jest składnią etykiety w kodzie JavaScript, ale ponieważ nie ma tam potrzeby etykiety, nie ma sensu jej dodawać.

Answer 5

Oto niepozorna alternatywa. Wbudowany kod JavaScript utrudnia śledzenie Twojego HTML. Oddzielenie JavaScriptu (logiki) od HTML (prezentacji) jest drogą do zrobienia. W jQuery byłoby coś takiego:

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

umieścić, że w głowie lub zewnętrznego pliku skryptu. Najlepiej tam, gdzie zdefiniowano twoje MyMethod. Teraz twój element jest czysty, a wszystkie wywołania metod są zlokalizowane w tym samym miejscu, a nie rozłożone w HTML.