Правильный способ связывания событий с JQuery

Question

Я немного новичок в Javascript, но еще более зеленый с jQuery. Я уже сталкивался с тем, что заставляло меня чесать голову.

В чем разница между:

$('.foo').click(function(){
//blah
});

и

$('.foo').onclick = function(){
//blah
}

Я предпочитаю второй способ, но он не работает. Я что-то не так делаю?

Заранее спасибо.

Answer 1

Вам не хватает всего смысла jQuery. Ваш предпочтительный метод не работает с jQuery, потому что jQuery не работает с отдельными элементами DOM. У одного элемента DOM есть свойство onclick, поэтому, если вы сделали что-то подобное, оно будет работать:

document.getElementById('bar').onclick = function() { // blah };

Тем не менее, jQuery - это всего лишь sets . Например, в вставленном вами коде вы пытаетесь связать что-то со всеми элементами с классом foo. Делая подобные вещи, вы должны играть по правилам jQuery (и это хорошо!). Обернутый набор, т. Е. $('.foo') - это , а не - это то же самое, что непосредственно получить элемент DOM, как я делал выше. Он будет , однако, будет содержать массив всех найденных элементов DOM, которые предоставляет jQuery. Таким образом, если бы в документе был один элемент с классом foo, вы могли бы сделать:

$('.foo')[0].onclick = function() { // blah };

Это, однако, не рекомендуется, поскольку весь смысл jQuery состоит в том, чтобы абстрагироваться от всего этого специфического синтаксиса Javascript и позволить jQuery разобраться за вас. Вы должны принять это, поскольку это сделает ваш код намного чище и портативнее. Поэтому вы должны использовать функции click или bind:

$('.foo').click(function() {
    // will bind something to all elements with a class of foo
});

$('.foo').bind('click', function() {
    // functionally identical to the above, either is fine
});

Answer 2

С $('.foo') вы взаимодействуете с объектом-оболочкой jquery (не объектом HTML-элемента), у которого нет свойства onclick, которое вы пытаетесь использовать во втором примере.

В первом примере показано, как jquery-маршал связывает эту функцию с событием, особенно с применением его ко всему с помощью класса "foo".

Если синтаксис более удобен, вы можете:

var myFunction = function() { /* blah */ };
$('.foo').click(myFunction);

Answer 3

Да, вы делаете что-то не так. Вот что:

В jQuery $ - это функция. Для простоты предположим, что это фабрика объектов типа "jQuery".

Итак, когда вы пишете

var temp = $('.foo');

Вы создаете объект типа "jQuery", который в основном содержит коллекцию всех узлов DOM с классом "foo".

Теперь у каждого объекта есть свой четко определенный набор элементов данных и методов.

click () - метод, принимающий функцию в качестве аргумента. Однако объект типа «jQuery» не имеет члена с именем «onclick». Поэтому, когда вы пишете:

$('.foo').onclick = function(){ //blah }

не работает.

Однако правильный метод:

temp.click( function(){ alert("My id is = " + this.id); } );

будет работать.

Ура!

JRH.

Answer 4

свойство onclick может быть присоединено только к элементам DOM. $ ('. foo') не является элементом DOM. Это похожий на массив объект jQuery. Он может ссылаться на один или несколько элементов DOM.

$('.foo')[0].onclick = function() {}

будет работать, но прикрепит событие только к первому совпадению.

$('.foo').click(function(){})

присоединяет событие onclick ко всем соответствующим элементам. На текущий элемент может ссылаться объект this внутри обработчика события.

Одна из причин использования jQuery - избегать нестандартного кода, подобного описанному выше. Хотя onclick поддерживается всеми браузерами, это не рекомендуемый стандарт W3C способ прикрепления событий.