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

190

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

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

Я получил, насколько:

$(document).click(select_element);

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

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

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

Ответы:

142

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

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

Русь Кэм
источник
6
Похоже, IE9 наконец-то его поддерживает. blogs.msdn.com/b/ie/archive/2010/03/26/...
некоторые
и почему они не поддерживают захват событий? Каковы недостатки захвата событий?
Аакаш
2
Просто чтобы прояснить, вы говорите, что то, что хочет ОП, невозможно - что вы должны использовать пузырьки и не можете использовать захват. Правильно?
Ноумен
115

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

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

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

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


источник
Принятый ответ был отредактирован для решения этой проблемы.
Пользователь, который не является пользователем
51

Самая близкая вещь была бы функцией привязки:

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

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
Бен Роу
источник
14

Единственное , что следует отметить , что методы событий 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);
tbjers
источник
1
Следует отметить, что это правильный путь, если вы не хотите перезаписывать какие-либо другие обработчики связанных событий для элемента (ов).
r3wt
что это $img?
Анатолий
12

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


источник
2 

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>
Развернуть фрагмент

antelove
источник
1

Вот отличное решение для этой проблемы в 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 прост и включен под заголовком «Legacy Internet Explorer и attachEvent»
  • Вы можете включить параметры, если заключите обработчик в анонимную функцию
Xitalogy
источник