¿Cuál es la mejor manera de agregar un evento en JavaScript?

veo 2 formas principales para establecer sucesos en JavaScript:¿Cuál es la mejor manera de agregar un evento en JavaScript?

añadir un evento directamente dentro de la etiqueta como esta:

<a href="" onclick="doFoo()">do foo</a>
Establecer con JavaScript como esto:

<a id="bar" href="">do bar</a>

y añadir un evento en una sección <script> dentro de la sección <head> o en un archivo JavaScript externo, al igual que si usted está utilizando PrototypeJS:

Event.observe(window, 'load', function() { 
    $('bar').observe('click', doBar); 
}

Creo que el primer método es más fácil de leer y mantener (porque la acción de JavaScript está directamente vinculada al enlace) pero no es tan clara (porque los usuarios pueden hacer clic en el enlace incluso si la página no está completamente cargada, lo que puede causar errores de JavaScript en algunos casos).

El segundo método es más limpio (las acciones se agregan cuando la página está completamente cargada) pero es más difícil saber que una acción está vinculada a la etiqueta.

¿Cuál método es el mejor?

¡Una respuesta asesina será totalmente apreciada!

Fuente

2008-08-29 paulgreg

En mi experiencia, hay dos puntos principales para esto:

1) Lo más importante es ser constante. No creo que ninguno de los dos métodos sea necesariamente más fácil de leer, siempre y cuando te apegues a él. Solo me confundo cuando se usan ambos métodos en un proyecto (o peor aún en la misma página) porque entonces tengo que empezar a buscar las llamadas y no saber dónde buscar inmediatamente.

2) El segundo tipo, es decir Event.observe() tiene ventajas cuando se realiza la misma o una acción muy similar en varios eventos porque esto se vuelve obvio cuando todas esas llamadas están en el mismo lugar. Además, como señaló Konrad, en algunos casos esto se puede manejar con una sola llamada.

Fuente

2008-08-29 08:10:41

Las bibliotecas como YUI y jQuery proporcionan métodos para agregar eventos solo cuando el DOM esté listo, lo que puede ocurrir antes de que se descargue window.onload. También aseguran que puede agregar múltiples manejadores de eventos para que pueda usar scripts de diferentes fuentes sin que los diferentes manejadores de eventos se sobrescriban entre sí.

Así que sus opciones prácticas son;

Uno. Si su secuencia de comandos es simple y la única que se ejecutará en la página, cree una función init como esta:

window.onload = function() { 
    init(); 
} 
function init() { 
    // actual function calls go here 
    doFoo(); 
}

Dos. Si usted tiene muchos guiones o planea mashup guiones de diferentes fuentes, utilice una biblioteca y su método onDOMReady añadir de forma segura sus controladores de eventos

Fuente

2008-08-29 07:41:45 Polsonby

creo que el primer método es más fácil de leer y mantener

He descubierto que lo opuesto es verdad. Tenga en cuenta que a veces más de un controlador de eventos se vinculará a un control dado.

Declarar todos los eventos en un lugar central ayuda a organizar las acciones que tienen lugar en el sitio. Si necesita cambiar algo, no tiene que buscar todos los lugares haciendo una llamada a una función, simplemente tiene que cambiarla en un solo lugar. Al agregar más elementos que deberían tener la misma funcionalidad, no tiene que recordar agregarles los manejadores; en cambio, a menudo es suficiente permitirles declarar una clase, o incluso no cambiarlos en absoluto porque lógicamente pertenecen a un elemento contenedor del cual todos los elementos secundarios se conectan a una acción.Desde un código real:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

Esta conectado un controlador de eventos para todos los títulos de las columnas en una tabla para que la mesa puede ordenar. Imagine el esfuerzo de hacer que todos los encabezados de columna se puedan ordenar por separado.

Fuente

2008-08-29 07:50:12

También puede usar addEventListener (no en IE)/attachEvent (en IE).

Salida: http://www.quirksmode.org/js/events_advanced.html

Estos permiten la conexión de una función (o funciones múltiples) a un evento en un objeto DOM existente. También tienen la ventaja de permitir el desapego más tarde.

En general, si usted está utilizando una cantidad seria de Javascript, que puede ser útil para hacer su Javascript legible, en contraposición a su html. Por lo tanto, podría decirse que onclick=X en html es muy claro, pero esto es tanto una falta de separación del código - otra dependencia sintáctica entre piezas - como un caso en el que tiene que leer tanto el html como el javascript para comprender el comportamiento dinámico de la página.

Fuente

2008-08-29 08:29:19 Tyler

Creo que el segundo método es generalmente preferido porque mantiene la información sobre la acción (es decir, el JavaScript) separada del marcado de la misma forma que CSS separa la presentación del marcado.

Estoy de acuerdo en que esto hace que sea un poco más difícil ver lo que está sucediendo en su página, pero las buenas herramientas como Firebug le ayudarán con esto mucho. También encontrará mucho mejor soporte IDE disponible si mantiene la mezcla de HTML y Javascript al mínimo.

Este enfoque realmente se hace notar a medida que su proyecto crece, y encuentra que desea adjuntar el mismo evento de javascript a un grupo de diferentes tipos de elementos en muchas páginas diferentes. En ese caso, es mucho más fácil tener un ritmo único que conecte eventos, en lugar de tener que buscar muchos archivos HTML diferentes para encontrar dónde se llama una función en particular.

Fuente

2008-08-29 09:05:59

Mi preferencia personal es usar jQuery en archivos js externos para que el js esté completamente separado del html. Javascript debería ser discreto, así que en línea (es decir, el primer ejemplo) no es realmente la mejor opción en mi opinión. Al mirar el html, el único signo de que está usando js debe ser el script que se incluye en la cabeza.

Un ejemplo de unir (y manipulación) eventos podría ser algo como esto

var myObject = { 

    allLinkElements: null, 

    init: function() 
    { 
     // Set all the elements we need 
     myObject.setElements(); 

     // Set event handlers for elements 
     myObject.setEventHandlers(); 
    }, 

    clickedLink: function() 
    { 
     // Handle the click event 
     alert('you clicked a link'); 
    }, 

    setElements: function() 
    { 
     // Find all <a> tags on the page 
     myObject.allLinkElements = $('a'); 

     // Find other elements... 
    }, 

    setEventHandlers: function() 
    { 
     // Loop through each link 
     myObject.allLinkElements.each(function(id) 
     { 
      // Assign the handler for the click event 
      $(this).click(myObject.clickedLink); 
     }); 

     // Assign handlers for other elements... 
    } 
} 

// Wait for the DOM to be ready before initialising 
$(document).ready(myObject.init);

Creo que este enfoque es útil si desea mantener todos sus js organizada, como se puede utilizar objetos específicos para las tareas y todo está muy bien contenido.

Por supuesto, la gran ventaja de permitir que jQuery (u otra biblioteca bien conocido) hacen el trabajo duro es que el apoyo entre navegadores es la atención (en gran parte) tomada de lo que hace la vida mucho más fácil

Fuente

2008-08-29 09:56:49

¿Cuál es la mejor manera de agregar un evento en JavaScript?

Respuesta

Cuestiones relacionadas