Простой javascript для имитации поведения jQuery с использованием этого в обработчиках событий - PullRequest
Новая
       16

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

6 голосов
/ 13 апреля 2010

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

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

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

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

Я, очевидно, пытался искать 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
});

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

1 Ответ

2 голосов
/ 13 апреля 2010

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

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

Например: 

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

Это вызовет текстовую функцию для объекта контекста (this) и оповестит ее значение. Теперь мы можем вызвать функцию и сделать контекст (this) обернутым элементом 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
}
...