$ (это) ИЛИ event.target ИЛИ вход var = $ (это)

jQuery в настоящее время предоставляет мне забавное введение в JavaScript после 12 лет выживания счастливо без. Я на этапе, где я пытаюсь изучить столько, сколько я могу об оптимизации кода, который я пишу и, пока я нашел много хорошего ссылочного материала, существует что-то довольно основное, которое является озадачивающим меня, и я не мог найти что-либо об этом где угодно.

Когда я присоединяю что-то к элементу, как я должен обращаться к тому элементу в функции. Например, при присоединении функции к событию щелчка элемента:

$('#a_button',$('#a_list_of_buttons')).click(function() {
    // NOW WHAT'S THE BEST WAY TO REFER TO '#a_button' ?
});

Я знаю, чтобы не продолжать повторно выбирать его как поэтому, поскольку браузер должен искать целый DOM снова с нуля для нахождения то, чем это уже найдено однажды:

$('#a_button').click(function() {
    // I KNOW THAT THIS IS NAUGHTY
    var buttonValue = $('#a_button').val();
    $('#a_button').addClass('button_has_been_clicked');

});

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

$('#a_button').click(function() {
    // USING this
    var buttonValue = $(this).val();
    $(this).addClass('button_has_been_clicked');
});

Но это просто повторно выбирает как в первом "непослушном" примере?

$('#a_button').click(function(event) {
    // USING event.target
    var buttonValue = $(event.target).val();
    $(event.target).addClass('button_has_been_clicked');
});

Это кажется, что могло бы быть лучше, но действительно ли эффективно относиться к 'event.target' многократно?

$('#a_button').click(function(event) {
    // USING A LOCAL VARIABLE
    var thisButton = $(this);

    // OR SHOULD THAT BE
    var thisButton = $(event.target);

    var buttonValue = thisButton.val();
    thisButton.addClass('button_has_been_clicked');
});

Я понимаю эффективность производительности передающих вещей к переменным, но я не уверен, предоставляют ли в этих ситуациях с помощью $ (это) или $ (event.target) уже мне ту же эффективность и так путем установки новой переменной, я на самом деле делаю больше работы, что я должен.

Спасибо.

7
задан Chris Stevenson 2 August 2010 в 13:05
поделиться

3 ответа

Я могу ошибаться, но this и event.target являются просто разными ссылками на один и тот же элемент.

this и event.target не являются всегда ссылками на один и тот же элемент. Но, отвечая на ваш вопрос, var thisButton = $ (this); определенно победитель. Если бы вы писали код C #, вы бы никогда не сделали следующее:

this.Controls[0].Controls[0].Text = "Foo";
this.Controls[0].Controls[0].Controls.Clear();

Вы бы сделали это:

var control = this.Controls[0].Controls[0];

Так что вам, вероятно, также никогда не следует повторно использовать $ (this) более одного раза. Хотя преобразовать this из элемента DOM в объект jQuery тривиально, это все же ненужные накладные расходы.

Однако иногда вам нужно отказаться от оптимизации, чтобы убедиться, что ваш код поддерживает читаемость.

Другой вариант, конечно же, - просто изменить то, что это . Это после javascript:

this = $(this); // Now `this` is your jQuery object

Заявление об ограничении ответственности : Я только что попробовал описанное выше, и, похоже, это сработало. Хотя могут быть некоторые проблемы.

4
ответ дан 7 December 2019 в 01:15
поделиться

this и event.target не всегда одинаковы. this относится к элементу, которому вы назначили слушателя (в данном случае "#a_button"). Однако event.target - это элемент, который фактически инициировал событие, которое может быть дочерним узлом #a_button .

Итак, $ (this) - это то, что вы ищете.

См. Ссылку: http://api.jquery.com/event.target/

5
ответ дан 7 December 2019 в 01:15
поделиться

По своему опыту я бы выбрал следующее:

$('#a_button').click(function() {
    // USING this
    var buttonValue = $(this).val();
    $(this).addClass('button_has_been_clicked');
});

this в контексте вашего метода обратного вызова click является ссылкой на событие DOM. Поскольку у вас уже есть ссылка на объект DOM, нет необходимости преобразовывать ее в объект jQuery, так как поиск не требуется.

Но, кстати, если вам не нужно использовать jQuery в обратном вызове, то и не нужно. Вы можете просто получить значение кнопки с помощью стандартного JS this.currentTarget.value.

Другие примеры, которые вы упомянули, требуют поиска в DOM, и в зависимости от сложности вашего селектора это может занять больше времени. Использование поиска на основе id, например '#a_button', будет работать лучше, чем поиск на основе класса, например .myClass.

0
ответ дан 7 December 2019 в 01:15
поделиться
Другие вопросы по тегам:

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