jQuery-эквивалент метода addEventListener в JavaScript

Я пытаюсь найти jQuery-эквивалент этого вызова метода JavaScript:

document.addEventListener('click', select_element, true);

Я дошел до:

$(document).click(select_element);

но это не дает того же результата, что и последний параметр метода JavaScript — логическое значение, указывающее, должен ли обработчик событий выполняться на этапе захвата или всплытия (насколько я понимаю из http://www.quirksmode.org/js/events_advanced.html) — не учитывается.

Как указать этот параметр или иным образом добиться той же функциональности с помощью jQuery?


javascript events jquery event-handling dom-events
person Bungle    schedule 07.03.2010    source источник
comment
Захват событий не поддерживается jQuery, так как захват событий не поддерживается IE, который поддерживает jQuery ;) Вы ищете совместимость с IE?   -  person Crescent Fresh    schedule 08.03.2010
comment
Спасибо, Crescent Fresh - я думаю, теперь это имеет смысл. Мне нужна совместимость с IE, поэтому я полагаю, что мне нужно забыть о фазе захвата.   -  person Bungle    schedule 08.03.2010

Ответы (6)


arrow_upward
149
arrow_downward

Не все браузеры поддерживают захват событий (например, версии Internet Explorer до 9 не поддерживают), но все поддерживают всплывающие сообщения, поэтому эта фаза используется для привязки обработчиков к событиям во всех кроссбраузерных абстракциях, включая jQuery.

Ближе всего к тому, что вы ищете в jQuery, используется bind() (заменено on() в jQuery 1.7+) или методы jQuery для конкретных событий (в данном случае click(), который в любом случае вызывает bind() внутри). Все используют фазу всплытия поднятого события.

person Russ Cam    schedule 07.03.2010
comment
Похоже, IE9 наконец-то его поддерживает. blogs.msdn.com/b/ie/archive/2010/03/26/ - person some; 28.07.2012
comment
и почему они не поддерживают захват событий? каковы недостатки захвата событий? - person Aakash; 09.09.2015
comment
Просто для ясности: вы говорите, что то, чего хочет ОП, невозможно - что вы должны использовать всплытие и не можете использовать захват. Правильно? - person Noumenon; 23.04.2017

arrow_upward
119
arrow_downward

Начиная с jQuery 1.7, .on() теперь является предпочтительным методом привязки событий, а не .bind():

Из http://api.jquery.com/bind/:

Начиная с jQuery 1.7, метод .on() является предпочтительным методом для присоединения обработчиков событий к документу. В более ранних версиях метод .bind() использовался для присоединения обработчика событий непосредственно к элементам. Обработчики присоединяются к текущим выбранным элементам в объекте jQuery, поэтому эти элементы должны существовать в момент вызова .bind(). Для более гибкой привязки событий см. обсуждение делегирования событий в .on() или .delegate().

Страница документации находится по адресу http://api.jquery.com/on/.

person Community    schedule 19.11.2011
comment
Принятый ответ был отредактирован для решения этой проблемы. - person ReinstateMonica3167040; 08.01.2020

arrow_upward
54
arrow_downward

Наиболее близкой была бы функция привязки:

http://api.jquery.com/bind/

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
person Ben Rowe    schedule 07.03.2010

arrow_upward
14
arrow_downward

Следует отметить, что методы событий jQuery не запускают/не перехватывают load в тегах embed, содержащих SVG DOM, который загружается как отдельный документ в теге embed. Единственный способ, который я нашел для перехвата события load, заключался в использовании необработанного JavaScript.

Это не сработает (я пробовал методы on/bind/load):

$img.on('load', function () {
    console.log('FOO!');
});

Однако это работает:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);
person tbjers    schedule 15.05.2013
comment
следует отметить, что это правильный способ, если вы не собираетесь перезаписывать какие-либо другие связанные обработчики событий для элемента (элементов). - person r3wt; 22.04.2015
comment
что такое $img? - person anatol; 13.12.2018

arrow_upward
13
arrow_downward

Теперь вы должны использовать функцию .on() для привязки событий.

person Community    schedule 03.03.2012

arrow_upward
1
arrow_downward

Вот отличное рассмотрение этой проблемы в Mozilla Development Network (MDN) для стандартного JavaScript (если вы не хотите полагаться на jQuery или лучше понимать его в целом):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

Вот обсуждение потока событий по ссылке в приведенном выше лечении:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Вот некоторые ключевые моменты:

  • Это позволяет добавить более одного обработчика для события
  • Это дает вам более тонкий контроль над фазой, когда активируется слушатель (захват или всплытие).
  • Он работает с любым элементом DOM, а не только с элементами HTML.
  • Значение this, переданное событию, — это не глобальный объект (окно), а элемент, из которого этот элемент запускается. Это очень удобно.
  • Код для устаревших браузеров IE прост и включен под заголовком «Устаревший Internet Explorer и attachEvent».
  • Вы можете включать параметры, если заключаете обработчик в анонимную функцию.
person Xitalogy    schedule 18.10.2012