¿Cómo funciona JQuery .click() detrás de escena?

Question

Esta pregunta es solo por curiosidad. Quiero saber cómo .click() de jquery funciona detrás de las escenas.

Por ejemplo, si se crea un botón:

<input type="button" id="myButton" value="Click me!" /> 

entonces tengo el siguiente código de jQuery:

$('#myButton').click(function() { 
    alert("I have been clicked."); 
}); 

¿Cómo jQuery hacerlo de modo que mi función es llamada cuando se hace clic en el botón ?

Al principio pensé que sería añadir el atributo onClick="" a la etiqueta del botón, pero cuando inspeccioné la página con Firebug Acabo de ver:

<input type="button" id="myButton" value="Click me!" /> 

¿Qué hace jQuery detrás de las escenas?

Answer 1

Dependerá del navegador.

Si está utilizando un navegador que admite addEventListener(), agregará un controlador que lo use.

Aunque estoy bastante seguro de que en realidad está adjuntando una función que las primeras reparaciones/normaliza el objeto event, a continuación, comprueba el elemento DOM para la propiedad jQuery12345... y busca el manejador de jQuery.cache y lo invoca.

Si se desconecta el elemento de la consola, verá una propiedad que se ve algo como:

jQuery1296081364954: 1 

A continuación, si se registra ese número a la consola de jQuery.cache, verá los datos asociados .

console.log(jQuery.cache[1]); 

... que le dará una estructura algo como esto:

{ 
    events:{ 
     click:[ 
     { /* object containing data relevant to the first click handler */ } 
     ] 
    }, 
    handle:{ /* this may be what initially gets called. Not sure. */ } 
} 

Debido jQuery hace normalizar el objeto de evento, no es tan simple como la asignación de controlador de AA para usted y llamando eso. Creo que también se hace con el caché para evitar fugas de memoria en los navegadores más antiguos.

Answer 2

Utiliza el modelo de eventos DOM, que es también lo que sucede cuando se agrega onClick(). así que básicamente registra un oyente para que el botón dispare el evento click y luego ejecuta el código que le indicó.

Answer 3

la función se adjunta al evento onclick en su entrada pero no utiliza la declaración html, sino javascript. En lugar de buscar en el código html, eche un vistazo a la pestaña DOM en Firebug, debería encontrarla allí.

en JavaScript llanura que es como

document.getElementById('myButton').addEventListener('click',function() { alert('hello!');},false);