web-dev-qa-db-ja.com

JavaScriptのaddEventListenerメソッドと同等のjQuery

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

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

私は限ります：

$(document).click(select_element);

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

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

javascriptjqueryeventsjavascript-eventsevent-handling
177
Bungle

すべてのブラウザがイベントキャプチャをサポートしているわけではありません（たとえば、Internet Explorer 9より前のバージョンはサポートしていません）。すべてのブラウザ間の抽象化でハンドラをイベントにバインドするフェーズです。

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

133
Russ Cam

JQuery 1.7以降、.on()が.bind()よりもイベントのバインド方法として好まれるようになりました。

から http://api.jquery.com/bind/ ：

JQuery 1.7以降、.on（）メソッドはイベントハンドラをドキュメントに添付するのに適したメソッドです。以前のバージョンでは、.bind（）メソッドはイベントハンドラを要素に直接アタッチするために使用されていました。ハンドラはjQueryオブジェクト内で現在選択されている要素にアタッチされているので、それらの要素は.bind（）の呼び出しが発生した時点で存在している必要があります。より柔軟なイベントバインディングについては、.on（）または.delegate（）のイベント委任に関する説明を参照してください。

ドキュメントページは http://api.jquery.com/on/ にあります。

110
user315772

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

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

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
49
Ben Rowe

注意すべき1つのことは、jQueryイベントメソッドは、loadタグ内の別のドキュメントとしてロードされるSVG DOMを含むembedタグに対してembedを起動/トラップしないことです。これらのイベントでloadイベントをトラップすることがわかった唯一の方法は、生のJavaScriptを使用することでした。

これはうまくいきません（on/bind/loadメソッドを試しました）：

$img.on('load', function () {
    console.log('FOO!');
});

しかし、これはうまくいきます：

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);
13
tbjers

イベントをバインドするために.on()関数を使うべきです。

12
user370770

これが標準的な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ブラウザのコードは単純で、「Legacy Internet Explorer and attachEvent」という見出しの下に含まれています。
  • ハンドラを無名関数で囲む場合は、パラメータを含めることができます。
1
Aeoril