web-dev-qa-db-ja.com

jQuery $（window）.blurとネイティブwindow.onblur

JQueryを使用する利点は何ですか

$(window).blur(function() { ... })

イベントハンドラーをアタッチするのではなく、

window.onblur = function() { ... }

後者は1つのブラーハンドラーしかサポートしていないため、堅牢性が低いようです。他のパッケージで使用すると、他のコードがwindow.blur値を別の関数でオーバーライドする可能性があります。ただし、これは、おそらくwindow.blurを基盤となる実装として使用するjQuery実装でも発生する可能性はありませんか？

EDIT：何人かの人々は、上記の方法とは別にwindow.addEventListenerイベントを追加するために使用できる'onblur'代替案についても言及しています。

javascriptjquerybluronblur
15
Andrew Mao

$(window).blur(function() { ... })

1つ以上のイベントハンドラーを追加できます。

window.onblur = function() { ... }

ぼかしイベントを処理するoneイベントハンドラーのみを使用できます。

前者は、jQuery独自のイベントハンドルメカニズムを使用します。 .blur()の呼び出しは、jQuery.fn.on()に委任され、次にjQuery.event.addに委任されます。このadd()メソッドは、指定されたイベントタイプに対して独自のハンドラーを作成し、指定されたタイプのイベントが発生するたびにこのハンドラーを呼び出すようにaddEventListener()に指示します。したがって、基本的にjQueryには、適切に実行するためにaddEventListener()に依存する独自のイベント処理方法があります。

後者は1つの値しか含めることができない属性であるため、イベントハンドラーをキューに入れることはできません。

私はこの点を証明するために少しデモンストレーションを書きました： http://jsfiddle.net/GnNZm/1/

32
Bart

JQueryメソッドを使用すると、複数のイベントハンドラーをアタッチできます。 _window.onblur_を設定すると、ハンドラーは1つだけになります。

純粋なJavaScriptにもこれがあります： window.addEventListener() 。実際、jQueryはこれを内部的に使用していると確信しています。 （ はい、そうです 。）

（編集）_window.onblur_プロパティは、基本的に単一のハンドラーを設定するためのショートカットです。 addEventListener()（またはjQueryラッパー）を使用すると、基本的にイベントハンドラーのリストが作成され、イベントが発生するとすべてが起動されます。私はテストしていませんが、2つを一緒に使用することもできると思います。これは単一の値ではなくリストであるため、複数のハンドラーが相互に干渉しないようにする必要があります。個別に、または一度にすべて削除することもできます。

on()を使用するjQueryのイベントハンドラーを使用すると、ハンドラーに名前空間を設定して、プラグインがハンドラーを削除した場合の衝突を防ぐこともできます。純粋なJSはこれを簡単に持っていないようです。

8
Scimonster

Jqueryブラーの場合

InternetExplorerではblurイベントはバブルしません。したがって、blurイベントでのイベント委任に依存するスクリプトは、ブラウザー間で一貫して機能しません。ただし、バージョン1.4.2以降、jQueryは、イベント委任メソッド.live（）および.delegate（）でblurをfocusoutイベントにマッピングすることにより、この制限を回避します。

jquery docから取得 https://api.jquery.com/blur/

また、jqueryでは複数のイベントハンドラーをバインドできます

5
Huangism

イベントをアタッチすると、すでにイベントハンドラーにアタッチされているイベントが上書きされる可能性があります。これは、さまざまなスクリプトが相互にイベントハンドラーを上書きするwindow.onload（）でよく発生していました。

例えば：

_//lightbox.js
window.onload = function() { /* do lightbox stuff */ }

//carousel.js 
window.onload = function() { /* do carousel stuff */ }
_

したがって、一般的な方法は次のようなものでした。

_var existing_event_handlers = window.onload;
window.onload = function(){

    //my event code
    alert('onready fired');

    //call other event handlers after
    existing_event_handlers();
} 
_

window.onblur = function() { ... }を使用すると、他の添付イベントの前または後にイベントを発生させるかどうかを具体的に指定できるため、依然として利点があります。

すでに指摘されている他の多くの回答と同様に、jQueryはほとんどのブラウザーの違いからあなたを抽象化します。 IE9より前のバージョンでは、addEventListener（）ではなくattachEvent（）が使用されていました。

2
Chris Gunawardena