JavaScript simple para imitar el comportamiento de jQuery al usar esto en controladores de eventos

Question

No se trata de jQuery, sino de cómo jQuery implementa dicho comportamiento.

En jQuery se puede hacer esto:

$('#some_link_id').click(function() 
{ 
    alert(this.tagName); //displays 'A' 
}) 

podría alguien explicar en términos generales (sin necesidad de escribir código) ¿cómo se obtienen a pasar elments persona que llama html del evento (un enlace en este ejemplo específico) en el esta palabra clave?

Obviamente traté de mirar primero en el código jQuery, pero no pude entender una línea.

Gracias!

ACTUALIZACIÓN: de acuerdo a la respuesta Anurag he decidido publicar algo de código en este punto, ya que parece más fácil de código de lo que pensaba:

function AddEvent(html_element, event_name, event_function) 
{  
    if(html_element.attachEvent) //IE 
     html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
    else if(html_element.addEventListener) //FF 
     html_element.addEventListener(event_name, event_function, false); //don't need the 'call' trick because in FF everything already works in the right way   
} 

y ahora con una simple llamada imitamos jQuery el comportamiento de utilizar esto en eventos manipuladores

AddEvent(document.getElementById('some_id'), 'click', function() 
{    
    alert(this.tagName); //shows 'A', and it's cross browser: works both IE and FF 
}); 

¿cree que hay algún error o algo que no he entendido que toman la cosa en todo un muy sup ¿Manera erficial?

Answer 1

En Javascript, puede llamar a una función de programación y decirle qué debe hacer referencia a this, y pasarlo algunos argumentos utilizando el método call o apply en Function. La función es un objeto también en Javascript.

jQuery itera a través de cada elemento coincidente en sus resultados, y llama a la función click en ese objeto (en su ejemplo) pasando el elemento como el contexto o lo que this hace referencia dentro de esa función.

Por ejemplo:

function alertElementText() { 
    alert(this.text()); 
} 

Esto llamará a la función de texto en el contexto (esto) objeto, y alertar a su valor. Ahora podemos llamar a la función y hacer que el contexto (esto) a ser el jQuery elemento (por lo que podemos llamar this directamente sin utilizar $(this) envuelto.

<a id="someA">some text</a> 
alertElementText.call($("#someA")); // should alert "some text" 

La distinción entre el uso de call o apply llamar a la función es sutil . con call se pasarán los argumentos como son, y con apply que serán pasados ​​como una matriz. Lea más sobre apply y call en MDC.

Del mismo modo, cuando un controlador de eventos DOM se llama, this ya apunta a el elemento eso desencadenó el evento. jQuery simplemente llama a su devolución de llamada y establece el contexto para el elemento.

document.getElementById("someId").onclick = function() { 
    // this refers to #someId here 
}