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

StackOverflow https://stackoverflow.com/questions/34126

Pregunta

Veo 2 formas principales para configurar los eventos en JavaScript:

  1. Agregar un evento directamente dentro de la etiqueta como esta:

    <a href="" onclick="doFoo()">do foo</a>

  2. Conjunto de ellos por JavaScript como este:

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

y agregar un evento en un <script> la sección dentro de la <head> sección 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 de mantener (debido a la acción JavaScript está directamente ligado a el link) pero no es tan limpia (ya que los usuarios pueden hacer clic en el enlace, incluso si la página no está a plena carga, que puede provocar errores de JavaScript en algunos casos).

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

Qué método es el mejor?

Un asesino respuesta va a ser plenamente apreciada!

¿Fue útil?

Solución

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 es necesariamente más fácil de leer, como siempre que se adhieren a ella.Solo me confundo cuando ambos métodos se utilizan en un proyecto (o peor aún, en la misma página), porque entonces tengo que empezar a buscar las llamadas y no de inmediato se sabe dónde buscar.

2) El segundo tipo, es decir, Event.observe() tiene ventajas cuando el mismo o muy similar acción se toma en múltiples eventos debido a esto se hace evidente cuando todas esas llamadas son en el mismo lugar.También, como Konrad señaló, en algunos casos, esto puede ser manejado con una sola llamada.

Otros consejos

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

He encontrado que lo contrario es cierto.Tenga en cuenta que, a veces más de un controlador de evento que será enlazado a un control determinado.

Declarar todos los eventos en un lugar central ayuda a organizar las acciones que tengan lugar en el sitio.Si necesita cambiar algo que usted no tiene que buscar por todos los lugares de realizar una llamada a una función, simplemente tienes que cambiar en un solo lugar.Al agregar más elementos que debe tener la misma funcionalidad que usted no tiene que recordar para agregar los controladores para ellos;en su lugar, es a menudo suficiente para hacerles declarar una clase, o incluso no cambiar en absoluto, ya que lógicamente pertenecen a un elemento contenedor de la que todos los elementos secundarios de obtener por cable a una acción.A partir de un código real:

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

Este cable de un controlador de eventos para todos los encabezados de columna en una tabla para hacer la tabla ordenable.Imaginar el esfuerzo que hacen todos los encabezados de columna se puede ordenar por separado.

Creo que el segundo método es generalmente preferido porque mantiene información acerca de la acción (es decir,el JavaScript) independiente de la marca de la misma manera CSS separa presentación de 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 buenas herramientas como firebug te ayudarán mucho.Usted también encontrará mucho mejor IDE de apoyo disponible si se mantiene la mezcla de HTML y Javascript a un mínimo.

Este enfoque realmente entra en su cuenta como crece el proyecto, y se desea adjuntar el mismo de eventos de javascript a un montón de diferentes tipos de elementos en diferentes páginas.En ese caso, se vuelve mucho más fácil tener un solo ritmo, el cual se adhiere eventos, en lugar de tener que buscar muchas diferentes archivos HTML a encontrar cuando un particular se llama a la función.

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

Echa un vistazo: http://www.quirksmode.org/js/events_advanced.html

Estos permiten asociar una función (o funciones múltiples) para un evento en un objeto DOM.También tienen la ventaja de permitir la onu-anexo más adelante.

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

Mi preferencia personal es el uso de jQuery en js externo de archivos, de manera que el js es completamente independiente de la de html.Javascript debe ser discreto, para en línea (es decir, el primer ejemplo) no es realmente la mejor opción en mi opinión.Cuando se mira en el html, la única señal de que usted está usando js debe ser la secuencia de comandos incluye en la cabeza.

Un ejemplo de adjuntar (y control) de los hechos 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 usted quiere guardar todas tus js organizados, como usted puede usar objetos específicos para tareas y todo está muy bien contenida.

Por supuesto, el gran beneficio de dejar de jQuery (u otro bien conocido de la biblioteca) hacer el trabajo duro es que la compatibilidad con navegadores es (en gran medida) cuidado de lo que hace la vida mucho más fácil

Las bibliotecas como YUI y jQuery proporcionan métodos para agregar eventos, sólo cuando el DOM está listo, que puede ser antes de ventana.onload.También se aseguran de que usted puede agregar múltiples controladores de eventos para que usted puede utilizar secuencias de comandos de diferentes fuentes sin los diferentes controladores de eventos sobrescribir el uno al otro.

Así que tus opciones prácticas son;

Uno.Si el guión es simple y el único que nunca va a correr en la página, crear una función init así:

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

Dos.Si usted tiene muchos scripts o plan de mashup secuencias de comandos a partir de diferentes fuentes, use una biblioteca y su onDOMReady método para añadir de forma segura sus controladores de eventos

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top