Forma correcta de llamar a un método JavaScript

Question

¿Hay alguna razón por la que deba llamar a un método JavaScript de la siguiente manera?

onClick="Javascript:MyMethod();" 

o puedo llamarlo así:

onClick="MyMethod();" 

¿Hay alguna diferencia?

Answer 1

El valor de un atributo onclick es el código, no un URI, así que esto es correcto (aunque no la única forma en que podría hacerlo, consulte la tangente # 1 abajo):

onClick="MyMethod();" 

Esta es incorrectos pero en gran parte inofensivo:

onClick="Javascript:MyMethod();" 

veces las personas piensan que este último está utilizando el protocolo javascript, al igual que en los enlaces, pero no lo es. Está haciendo algo completamente diferente. El idioma del código en el atributo onclick se define en el nivel de la página (y el valor predeterminado es JavaScript), por lo que lo que está haciendo es declarar una etiqueta en su código JavaScript y luego llamar al MyMethod. JavaScript tiene etiquetas (vea la tangente n. ° 2 a continuación), aunque no se usan mucho.

El atributo onclick es totalmente diferente del atributo href en los enlaces:

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

Allí, ya que estamos poniendo código donde se espera un URI, tenemos que especificar un URI mediante el protocolo javascript, por lo el navegador sabe lo que estamos haciendo. javascript es un protocolo (como http o mailto) que Brendan Eich (creador de JavaScript) fue lo suficientemente inteligente como para definir y registrar (e implementar) muy, muy temprano, por lo que está bien respaldado.

Finalmente: Mejor hacer onclick todo en minúsculas, no en mayúsculas, aunque solo realmente importa si usa XHTML.

---

Tangente # 1

Tal vez un poco fuera de tema, pero: Usando el HTML atributos para conectar los manipuladores es perfectamente válido y funciona bien a través del navegador, pero no se mezcla su transmisión en circuito de eventos de JavaScript con tu HTML Algunas personas lo ven como algo bueno, otros pertenecen al lado de "JavaScript discreto" y piensan que deberían conectarlo todo más tarde. Lo que se hace depende de usted. El enfoque discreto es particularmente útil cuando los diseñadores de HTML y los codificadores de JavaScript no son las mismas personas (como ocurre con frecuencia en equipos grandes).

El enfoque discreto básicamente dice: No use los atributos HTML para esto, hágalo más tarde desde el script.Así que en lugar de

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

es posible que tenga este código HTML:

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

combinado con este 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 
     } 
    } 
} 

... donde setTab utiliza contexto de averiguar donde se ha hecho la ficha y actuar en consecuencia, y se llama al hookUpTabs tan pronto como el DOM esté listo. Tenga en cuenta que cuando estamos configurando el controlador de clics, estamos asignando una referencia de función, no una cadena, al onclick en la pestaña div.

No utilizaría realmente onclick en el apartado anterior, usaría controladores DOM2 a través de las funciones addEventListener (estándar)/attachEvent (Microsoft). Pero no quería entrar en cosas estándar vs. Microsoft. Y tampoco, si comienzas a hacer JavaScript discreto, utiliza una biblioteca para manejar esas cosas por ti (jQuery, Prototype, Closure, whatever).

---

Tangente # 2

Otra tangente ligeramente fuera de tema: Entonces, ¿qué son estas etiquetas de JavaScript entonces? Los detalles en la especificación como siempre, pero aquí hay un ejemplo del uso de etiquetas con una break comunicado dirigido en un bucle:

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 ya se presume que está ejecutando el código JavaScript, así que no hay necesita una pseudo url javascript:.

Answer 3

AFAIK, usted está definiendo una etiqueta de salto con el nombre Javascript aquí. No deberías hacer eso. Esto no hace diferencia a la llamada. Este es el camino a seguir:

onClick="MyMethod();" 

Answer 4

La diferencia es que la primera es incorrecta.

El primero simplemente funciona porque someidentifier: es la sintaxis de una etiqueta en JavaScript, pero como no hay necesidad de una etiqueta allí, no tiene sentido agregarla.

Answer 5

Aquí hay una alternativa discreta. El código JavaScript en línea hace que su HTML sea difícil de seguir. Separar tu JavaScript (lógica) de tu HTML (presentación) es el camino a seguir. En jQuery sería algo como esto:

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

Colóquelo en su cabeza o en un archivo de script externo. Preferiblemente donde se define su MyMethod. Ahora su elemento está limpio y todas sus llamadas a métodos están ubicadas en el mismo lugar, en lugar de extenderse a través del HTML.