JavaScript y Eventos - Mejor Práctica

Question

Una vez leí que la siguiente técnica de codificación es considerado malo:

<a HREF="page.htm" onClick="alert('Hello World')">text link</a> 

Básicamente, teniendo estos controladores de eventos (como onClick) dentro de la etiqueta HTML es el enfoque equivocado para su uso. ¿Cuál es la razón para esto? ¿Cómo se llama esta técnica "mala"? ¿Cuál es la forma apropiada de hacer esto?

Answer 1

Este es un controlador de eventos en línea atributo. (+1 respuesta de chjj para las alternativas).Por lo general se considera 'malo' para un número de razones:

• va a mezclar pequeños trozos de JavaScript línea de sintaxis con la sintaxis HTML:

  • cuando se tiene una gran cantidad de estos, especialmente cuando se tienen muchos elementos que contienen esencialmente el mismo bit de código, es más difícil leer y mantener el código;

  • se obtiene anidada escapar horrores cuando necesite utilizar caracteres especiales-a-HTML en el código:

ej .:

<a href="x.html" onclick="this.innerHTML= '&lt;em>I like &quot;fish &amp;amp; chips&quot;&lt;/em>';"> 

• propiedades del elemento de destino y todos los nodos de ancestro se convierten en variables, potencialmente ocultando su propio v ariables del mismo nombre. Consulte this question para obtener información general sobre este comportamiento sorprendente y casi siempre no deseado;

  • esto introduce incompatibilidades espeluznantes ya que los navegadores tienen diferentes propiedades de DOM;

  • y los navegadores futuros que introduzcan nuevas propiedades romperán potencialmente su código.

Answer 2

No estoy seguro del término oficial, pero no es una buena práctica porque HTML debe ser puro marcado, sin mezclar el script del lado del cliente directamente en él.

La mejor práctica es unir el evento de tal manera:

window.onload = function() { 
    document.getElementById("MyLink").onclick = function() { 
     alert('Hello World'); 
     return false; 
    } 
} 

Después de dar el ID de enlace MyLink por ejemplo.

Answer 3

El mejor enfoque se llama unobtrusive JavaScript y básicamente significa la separación de comportamiento (JS) de la estructura (HTML), similar a cómo CSS es una separación de la presentación de la estructura y también por las mismas razones.

Answer 4

Un par de razones. Es esencialmente un alias de la interfaz DOM Nivel 1 de element.onclick, que solo permite un detector de eventos.

Otra razón es que simplemente es filosóficamente erróneo. Conduce a un código mal organizado: estás mezclando un lenguaje declarativo con un lenguaje funcional que incorpora grandes cantidades de lógica en su ejecución.

La forma correcta sería:

element.addEventListener('click', function() { 
    console.log('hello world'); 
}, false); // required for old gecko 

O en IE:

element.attachEvent('onclick', function() { 
    console.log('hello world'); 
}); 

o en el muy menos, utilizar el modelo DOM nivel 1:

element.onclick = function() { 
    console.log('hello world'); 
}; 

(También tenga en cuenta que alert es una mala práctica, bloqueará la ejecución del página del neumático)

Otra razón sería que no tiene acceso a ningún tipo de objeto de evento que normalmente obtendría como primer argumento de la devolución de llamada del oyente. (Estás esencialmente dentro de una devolución de llamada cuando configuras los atributos de [evento], por lo que no estoy seguro si puedes hacer argumentos [0] o cómo los diferentes motores de renderización lo implementan. Es muy incómodo, por lo que es mejor vincular eventos en JS-land.)

La razón final que se me ocurre es la compatibilidad con varios navegadores. No puedes normalizar una interfaz de evento para ti si estás vinculando eventos en HTML.