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

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

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

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

$(document).click(select_element);

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

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

Источник

6 ответов

Решение

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

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

Источник

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

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

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

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

Источник

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

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

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

Стоит отметить, что методы событий 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);
Источник

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

Источник 

$( "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>

Источник

Вот отличное решение для этой проблемы в 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/

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

  • Позволяет добавить более одного обработчика для события
  • Это дает вам более детальный контроль фазы, когда слушатель активируется (захват или всплывание)
  • Работает на любом элементе DOM, а не только на элементах HTML
  • Значение this, передаваемое событию, является не глобальным объектом (окном), а элементом, из которого запускается элемент. Это очень удобно.
  • Код для старых браузеров IE прост и включен под заголовком "Legacy Internet Explorer и attachEvent"
  • Вы можете включить параметры, если заключите обработчик в анонимную функцию
Источник
Другие вопросы по тегам