Простой javascript для mimic поведения jQuery использования этого в обработчиках событий

Question

Это не вопрос о jQuery, а о том, как jQuery реализует такое поведение.

В JQuery вы можете сделать это:

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

мог кто-нибудь объяснить в общих чертах (нет необходимости писать код) Как они получают, чтобы передать Вызывающий HTML элементов, входящих мероприятия (ссылку в этом конкретном примере) в ключевое слово?

Я, очевидно, попытался посмотреть 1-й код jQuery, но я не мог понять одну строку.

Спасибо!

UPDATE: согласно Анурагу ответу я решил разместить код в этот момент, потому что кажется проще коду, чем я думал:

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   
} 

, а затем теперь с помощью простого вызова мы имитируем JQuery поведение с помощью этого в обработчики событий

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

Как вы думаете, есть какая-либо ошибка или что-то я неправильно понял, берущий все дело в слишком вирах правдиво?

Answer 1

В Javascript, вы можете вызвать функцию программно и сказать ему, что this следует обратиться, и передать ему какие-то аргументы, используя либо call или apply метод в Function. Функция также является объектом в Javascript.

jQuery выполняет итерацию через каждый соответствующий элемент в своих результатах и ​​вызывает функцию click на этом объекте (в вашем примере), передавая сам элемент как контекст, или то, что this относится к этой функции.

Например:

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

Это будет вызывать текстовую функцию на контекст (это) объекта, и предупредить его значение. Теперь мы можем вызвать функцию и сделать контекст (это) как JQuery завернутого элемента (таким образом, мы можем назвать this напрямую, без использования $(this).

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

различия между использованием call или apply для вызова функция является тонкой . с call будут переданы аргументы, как они есть, и с apply они будут переданы в виде массива. Читайте подробнее о apply и call на MDC.

Точно также, когда обработчик событий DOM называется, this уже указывает на элемент что вызвало событие. jQuery просто вызывает ваш обратный вызов и устанавливает контекст для элемента.

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