JavaScriptのaddEventListenerメソッドに相当するjQuery

190

このJavaScriptメソッド呼び出しに相当するjQueryを見つけようとしています。

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

私は限り得ました：

$(document).click(select_element);

ただし、JavaScriptメソッドの最後のパラメーターと同じ結果は得られません-イベントハンドラーをキャプチャ段階またはバブリング段階で実行する必要があるかどうかを示すブール値（http://www.quirksmode.orgからの私の理解によると）/js/events_advanced.html）-省略されています。

jQueryを使用してそのパラメーターを指定する方法、または同じ機能を実現するにはどうすればよいですか？

— バングル
ソース

3

イベントのキャプチャはjQueryでサポートされていません。イベントのキャプチャは、jQueryがサポートするIEではサポートされていないためです;）IEの互換性を探していますか？

— クレセントフレッシュ

おかげで、クレセントフレッシュ-それは今では理にかなっていると思います。IEの互換性は必要なので、キャプチャ段階を忘れる必要があると思います。

— Bungle

142

すべてのブラウザーがイベントキャプチャーをサポートするわけではありませんが（たとえば、Internet Explorerのバージョンが9未満の場合はサポートされません）、すべてがイベントバブリングをサポートします。

jQueryで探しているものに最も近いものがbind()（on()jQuery 1.7以降では置き換えられます）、またはイベント固有のjQueryメソッド（この場合click()はbind()内部的に呼び出す）を使用しています。すべてが発生したイベントのバブリング段階を使用します。

— ラスカム
ソース

6

IE9がついにそれをサポートするように見えます。blogs.msdn.com/b/ie/archive/2010/03/26/...

— いくつかの

そしてなぜ彼らはイベントのキャプチャをサポートしていませんか？イベントキャプチャの欠点は何ですか？

— Aakash

2

明確にするために、OPが望んでいることは不可能である、つまり、バブリングを使用する必要があり、キャプチャを使用できないことを示しています。正しい？

— Noumenon 2017

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

最も近いものはbind関数です：

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 2015

なに$img？

— anatol

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

標準のJavaScriptに対するこの問題のMozilla Development Network（MDN）での優れた扱いを次に示します（jQueryに依存したくない、または一般的に理解したくない場合）。

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

上記の処理のリンクからのイベントフローの説明は次のとおりです。

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

重要なポイントは次のとおりです。

イベントに複数のハンドラーを追加できます
リスナーがアクティブになったときに、フェーズを細かく制御できます（キャプチャとバブリング）。
HTML要素だけでなく、あらゆるDOM要素で機能します
イベントに渡される「this」の値は、グローバルオブジェクト（ウィンドウ）ではなく、要素の起動元の要素です。とても便利です。
レガシーIEブラウザーのコードはシンプルで、「レガシーInternet ExplorerとattachEvent」という見出しの下に含まれています
ハンドラーを無名関数で囲む場合、パラメーターを含めることができます

— Xitalogy
ソース