javascript - ejemplos - onclick="" vs controlador de eventos

onclick jquery html

Question

Si quiero que se ejecute una función, prefiero hacer js en línea:

<p id="element" onclick="doSomething();">Click me</p>

porque es más fácil de depurar.

Sin embargo, oigo a personas que dicen que no usan js en línea, y lo hacen:

document.getElementById(''element'').onclick = doSomething;

¿Por qué se recomienda el js event listener?

Answer 1

A pesar de lo que otras personas puedan pensar, creo que hay un valor redentor para los oyentes en el marcado. Específicamente, le da mucha más libertad para modificar los nodos DOM. Si está agregando oyentes a través de JavaScript, los oyentes se pierden cuando reemplaza el innerHTML de cualquier nodo padre. Si está alineando a los oyentes en el marcado, puede clonar el nodo, hacer modificaciones en él, luego reemplazar el nodo original con el nodo que acaba de clonar y modificar.

Quizás sea mejor describirlo en un caso de uso específico. Deseo realizar cambios en varias partes del documento sin activar el reflujo varias veces. Entonces, en este caso, puedo clonar el nodo, hacer cualquier cambio en él (sin reflujo desde su separación), luego reemplazar el nodo anterior por el nodo modificado (desencadenando un reflujo). Con los oyentes integrados, esto evita que los oyentes se pierdan durante el reemplazo.

Answer 2

Además de la perspectiva de estándares de codificación

Usando atributos:

<p id="element" onclick="doSomething();">Click me</p>

si agrega el mismo atributo nuevamente (vea a continuación), se considera el último.

<p id="element" onclick="doSomethingMore();">Click me</p>

Usando el manejador de eventos:

document.getElementById(''element'').onclick = doSomething;

y digamos que agregaste la siguiente línea

document.getElementById(''element'').onclick = doSomethingMore; Ambos manejadores son invocados.

Answer 3

Básicamente, tiene que ver con todo mantener todo separado, creo. Por lo tanto, mantenga HTML / CSS / JS separados. Hace que tu HTML sea más ordenado y, creo, más fácil de navegar sin él.

Luego, cuando / si necesita hacer cambios grandes, tiene mucho espacio para tener que cambiar el JS en línea a un archivo externo de todos modos O si desea aplicar la misma función a más de un botón, entonces tiene menos código. Y menos código es un lugar más feliz

Si tiene sus archivos JS correctamente y completamente documentados, navegarlos por una persona externa se hace más fácil.

Answer 4

Hay muchas razones para evitar el JavaScript en línea y una de las más importantes es la capacidad de mantenimiento del código.

Un ejemplo rápido (estoy usando jQuery simplemente para demostraciones).

<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p>

¿Qué pasa si de repente recibe una solicitud para cambiar todos sus párrafos para ejecutar otra función? En su ejemplo, debería cambiar todo manualmente en su código HTML. Sin embargo, si elige separar HTML de JavaScript, simplemente puede hacerlo así.

<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
<p class="element">Click me</p>
$(''.element'').bind(''click'', doSomethingElse);

El código HTML también es más limpio, lo que permite a los diseñadores centrarse exclusivamente en el diseño sin temor a que realmente rompan algo mientras trabajan en un proyecto que también involucra a otras personas.

EDITAR: Proporcionando un ejemplo para mi comentario a continuación.

Project = {
// All the variables/constants/objects that need to be globally accessible inside the Project object.
init : function(){
// Main entry point...
this.MainMenu.init();
// Rest of the code which should execute the moment Project is initiated.
}
}
Project.MainMenu = {
// All the variables/constants/objects that need to be accessible only to MainMenu.
init : function(){ // Is run immediatelly by Project.init()
// Event handlers relevant to the main menu are bound here
// Rest of the initialization code
}
}
Project.SlideShow = {
// All the variables/constants/objects that need to be accessible only to SlideShow.
init : function(){ // Is run only on pages that really require it.
// Event handlers for the slideshow.
}
}

Answer 5

No conozco ni tengo la ventaja de utilizar el controlador en línea frente a adjuntar el controlador más adelante. En mi experiencia, prefiero usar el método en línea cuando tengo que tratar con elementos dinámicos, por ejemplo, quiero agregar un controlador a cada imagen y la cantidad de imágenes cambia según otros datos (por ejemplo, imágenes en db). En este caso, usar inline me permite agregar un controlador a cada imagen, de lo contrario tendré que volver a calcular el número de imágenes en el archivo javascript para adjuntarlo y manejarlo en cada imagen.

Por supuesto, cuando puedes usar libs como jQuery donde puedes obtener fácilmente la lista de elementos en línea no son útiles

Answer 6

Podría decir lo mismo sobre CSS e incluir estilos en línea. Sería fácil no tener que pasar por un archivo css para encontrar la clase / ID actual, o los elementos padre / hijo con los que está trabajando.

¿Es realmente mejor vincular un clic para decir 10 elementos diferentes en línea? ¿O solo un controlador de eventos dirigido a una clase? Incluso si no necesita manipuladores de 10 clics, siempre es una mejor idea configurar el código para su mantenimiento y actualizaciones en el futuro.

Answer 7

Un gran argumento en contra de los manejadores de eventos en línea, y el argumento al que se dirigen las otras respuestas aquí es la separación entre presentación y lógica .

Sin embargo, en realidad hay un problema más grande de la OMI: la forma algo elusiva de cómo se evalúan los manejadores de eventos en línea.

Como puede hacerlo ahora, el contenido de los atributos on* se usará como cuerpo de la función del controlador de eventos. Pero, ¿qué características tiene esta función?

Una de las sorprendentes es que las propiedades de algunos elementos ancestrales y del elemento en sí están en el alcance del controlador de eventos en línea.

Aquí hay un ejemplo :

<form>
<input name="foo" />
<button type="button" onclick="console.log(foo); console.log(window.foo);">
Click me
</button>
<div onclick="console.log(foo);">Click me as well!</div>
</form>

Al hacer clic en los registros del button

[object HTMLInputElement]
undefined

en la consola El hecho de que window.foo undefined esté undefined le dice que no existe una variable global foo . Entonces, ¿de dónde viene la variable foo ? ¿Por qué console.log(foo) registra el elemento de entrada y no arroja un error de referencia?
Porque las propiedades del elemento de form están en el ámbito del controlador de eventos y el elemento de form tiene una propiedad para cada elemento de control de formulario con nombre que contiene. Puede probar esto fácilmente con console.log(document.querySelector(''form'').foo) .

Ahora, al hacer clic en el elemento div realidad arroja un error de referencia:

ReferenceError: foo is not defined

Entonces, aparentemente, el elemento de form está solo en el alcance de los elementos de control de formulario, no en ningún descendiente. ¿Qué tan confuso es eso?

Del mismo modo, las propiedades del objeto del document también están dentro del alcance de los controladores de eventos en línea, lo que puede conducir a algunos errores sorprendentes (¿sabías que el document tiene un plugins propiedad?).

Cómo se evalúan exactamente los controladores de eventos en línea se formaliza en las especificaciones de HTML5 . Tenga un bucle en el paso 10 en particular donde se describe la creación de la cadena de alcance.

Conclusión

Debido a esta conexión implícita entre los elementos y los controladores de eventos en línea, los errores pueden ser realmente difíciles de rastrear. Por supuesto, está bien usar controladores de eventos en línea si solo quieres probar algo. Pero usarlos en el código de producción implica un mayor costo de mantenimiento.

Los artículos de quirksmode.org explican las diferentes formas de vincular a los manejadores de eventos y sus (des) ventajas muy bien.

Answer 8

Veo que algunos dicen que debe haber una separación de preocupaciones con respecto a Presentación y Lógica empresarial.

¡OP en su ejemplo muestra esta separación! No hay lógica en el controlador de eventos en línea, sino simplemente una referencia / llamada de función que se ejecutará en el evento de "clic" ... la lógica misma se puede mantener por separado en otro lugar.

Yo personalmente prefiero este enfoque debido a la capacidad de descubrimiento del flujo lógico. Si nunca antes había visto una aplicación ... el primer lugar en el que voy a comenzar el recorrido de mi código está en el DOM, y allí estará claro qué manejadores de eventos están en juego y qué funciones proporcionan la lógica al manejadores. Con el uso, digamos, un enfoque de eventos "JQuery.On", con solo echar un vistazo al html no tendrías idea qué manejadores están conectados y proporcionando funcionalidad.

Los controladores de eventos en línea que simplemente proporcionan punteros a las funciones simplemente conectan los eventos y no filtran la lógica en la presentación.