jQueryでライブカスタムイベントを作成する方法

StackOverflow https://stackoverflow.com/questions/815809

質問

jQueryにはlive（）と呼ばれる本当に便利なイベントバインダーがあり、DOM要素にイベントをその場で追加します（後でDOMに追加される要素でも）。問題は、特定のイベントでのみ動作することです（ドキュメントのここにリストされています）。

現在、ライブでサポートされていないフォーカス、ぼかし、変更のためのライブイベントが本当に欲しいです。それに、ライブのカスタムイベントを作成できれば、アプリにとって大きなゲームチェンジャーになります。私が今持っているコードのほとんどは、古いイベント（アイテムをドラッグ可能またはサイズ変更可能にするための変更、フォーカス、カスタムイベント）をajaxを通じて追加された新しいdom要素に再バインドすることに専念しています。

アイデアはありますか？イベントの委任が道であると思いますが、今はコードをより複雑にします。たぶん、イベントの委任を処理するプラグイン...わからない。解決策を見つけてください。

役に立ちましたか？

解決

この機能は、jQuery 1.4で利用可能になりました。 live（）はすべてのJavaScriptイベント（カスタムイベントを含む）をサポートするようになり、 focusin および focusout イベントが focus および blur 。

.live（）に関する jQuery 1.4のドキュメントから：

  

jQuery 1.4では、.live（）メソッドはすべてのJavaScriptイベントと同様にカスタムイベントをサポートします。 2つの例外：フォーカスとブラーは実際にはバブルイベントではないため、代わりにfocusinとfocusoutを使用する必要があります。

他のヒント

jQueryにない場合は、おそらく理由があります。信頼できないブラウザのバグなど。彼らがそれを実装するまで待つか、ライブになった元のプラグインを使用してみます http：//docs.jquery。 com / Plugins / livequery

編集：

良い投票者。 jQueryに含まれていないのには理由があり、それらが lazy であるためだと非常に疑っています。実際にソースを読んで、特定のイベントのみがlive（）で実装されている理由を探して時間を費やしましたが、その理由はわかりません。だから誰かが知っていたら...教えてください。

jQueryの live（） メソッドは、他のDOMイベントのようにフォーカスイベントとブラーイベントが伝播（バブル）しないため機能しません。 jQueryチームは最終的にこの機能を導入しますが、人為的（手動バブリング）にする必要があります。

jQueryを使用していなくても live（） の利点が必要な場合、それをサポートするブラウザー（ほとんどのIE以外のブラウザー）でイベントキャプチャを使用しますIEでは、 onFocusIn / onFocusOut イベントを使用します（これらのイベントは、フォーカス/ぼかしとは異なり、バブルします）。

例を次に示します。

function onFocus(el, fn) {
    var outerFn = function(e) {
        e = e || window.event;
        if ((e.target || e.srcElement) === el) {
            fn.call(el);
        }
    };
    if (document.body.addEventListener) {
        // This is event capturing:
        document.body.addEventListener('focus', outerFn, true);
    } else {
        // This is event delegation:
        document.body.attachEvent('onfocusin', outerFn);
    }
    return outerFn;
}

使用方法：

onFocus(document.getElementById('myInputField'), function(){
    log('FOCUSED!!!');
});

同様の抽象化は、ぼかしイベントと変更イベントに使用できます。

イベントの順序（キャプチャ/バブリング）の詳細については、 http：//をご覧ください。 www.quirksmode.org/js/events_order.html

イベントを新しい要素に再バインドするため、jQueryプラグインであるliveQueryが機能することにも注意してください。 'append'、 'insertBefore'などのjQueryのDOM操作メソッドでのみ機能します。したがって、jQueryを使用せずに新しい要素を追加した場合、機能しません。

Ariel FlesleyのjQuery.Listenプラグインを確認してください。 live（）イベントおよびlivequery（）プラグインに似ていますが、focus（）およびblur（）イベントをサポートしています。

http://flesler.blogspot.com/2007/10/jquerylisten.html

jQueryの.live（）関数を補完するものとしてlivequeryプラグインを使用しました。 focus、blur、changeなどのイベントをバインドできるだけでなく（live（）は1.3.2の時点ではまだサポートしていません）、カスタムイベントをその場でDOM要素にバインドするメカニズムも提供します。たとえば、Ajaxを介して追加されるいくつかのDOM要素にドラッグ可能およびドロップ可能をバインドするために使用しました。 これにより、コードが読みやすくなり、保守しやすくなります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top