jQuery еквівалент методу addEventListener JavaScript

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 - я думаю, це має сенс зараз. Мені потрібна сумісність IE, тому я думаю, що мені потрібно забути про фазу захоплення.

— Бангл

142

Не всі браузери підтримують захоплення подій (наприклад, версії Internet Explorer менше ніж 9), але всі підтримують бульбашку подій, саме тому це фаза, яка використовується для прив'язки обробників до подій у всіх абстракціях між переглядачами, включаючи jQuery.

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

— Russ Cam
джерело

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>

Розгорніть фрагмент

— антелове
джерело

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
Значення "цього", що передається події, - це не глобальний об'єкт (вікно), а елемент, з якого елемент запускається. Це дуже зручно.
Код застарілих веб-переглядачів IE простий і міститься у заголовку "Спадковий Internet Explorer і attachEvent"
Ви можете включити параметри, якщо вкладете обробник в анонімну функцію

— Xitalogy
джерело