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

Question

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

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

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

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

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

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

Спасибо!

ОБНОВЛЕНИЕ: по данным Anurag отвечают, что я решил отправить некоторый код в этой точке, потому что кажется легче кодировать, чем, что я думал:

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
});

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

6

javascript events javascript-events event-handling this

задан Marco Demaio 13 April 2010 в 19:48

1 ответ

Другие вопросы по тегам:

javascript events javascript-events event-handling this

Похожие вопросы:

score 2 · Accepted Answer

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

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

Например:

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

Это вызовет текстовую функцию для объекта context (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
}