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?

— неумело
источник

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
источник