0

DOM 要素に jQuery を使用してイベント ハンドラーをアタッチします。

1)直接 —

    $(#elemId).bind("click",function(){ …//event handler code}); OR

2) 委任による。—

         $(document).delegate("#elemId","click",function(){ …//event handler code});

また、これらの添付されたイベント ハンドラーをコードから手動で実行する必要がある状況にも遭遇します。これを行うには、要素に対して jQuery で .trigger() API を使用できます。

       $(#elemId).trigger("click")

シナリオによっては、アタッチしたイベント ハンドラーのみを実行したいが、そのイベントに関連付けられている既定のアクションを実行したくない場合があります。要素の jQuery で .triggerHandler() API を使用することで、これを実現できます。

$(#elemId).triggerHandler("click");

たとえば、「チェックボックス」のリストに「クリック」イベントをアタッチし、チェックボックスのいずれかがオン/オフになったときにイベント ハンドラーを実行できます。ここで、チェックボックスのクリックイベントのデフォルトのアクションは、そのチェックボックスがチェックされる/チェックされない（つまり、チェックボックスのステータスが変更される）ことです。いくつかのシナリオでは、クリックされたときにチェックボックスのステータスを変更したくない場合がありますが、イベントハンドラーでコードを実行したい場合があります.上記で説明したように、.trigger の代わりに .triggerHandler() を呼び出すことにより、jQuery でこれを実現できます。 () でイベントを発生させます。

ただし、委譲によって DOM 要素にイベントをアタッチすると、これは機能しません。イベント委任の場合にデフォルト アクションを実行せずにイベント ハンドラーを実行する他の方法は何ですか?

次の JSfiddles の違いを確認してください: 直接イベント処理の場合:

       http://jsfiddle.net/g2TWh/7/

委任されたイベント処理の場合:

        http://jsfiddle.net/g2TWh/8/

(「実行」をクリックしても、イベントハンドラー関数のアラートは表示されないことに注意してください)

4

2 に答える 2

1

JQuery APIによると：

.triggerHandler() で作成されたイベントは、DOM 階層をバブルアップしません。ターゲット要素によって直接処理されない場合、何もしません。

イベント委任を使用しているため、イベントは、イベントを処理すると思われるドキュメントにバブルできません。

もう 1 つの方法は、カスタム イベントを追加し、そのハンドラーで event.preventDefault() を使用することです。

    //attach an event "click" by delegation
$(document).on("customevent", "#childinput1", function (e) {
    e.preventDefault();
    alert('in delegated  "custom" event handler');
});
$(document).on("click", "#childinput1", function (e) {
    alert('in delegated  "click" event handler');
});
testTrigger();

function testTrigger() {
    $("#childinput1").trigger("customevent");
}

フィドル

ちなみに、jquery 1.7 以降を使用する場合は、「$.delegate」の代わりに「$.on」を使用する必要があります。

jQuery 1.7 の時点で、.delegate() は .on() メソッドに取って代わられました。ただし、以前のバージョンでは、イベント委任を使用する最も効果的な手段であり続けています。

于 2013-09-28T16:48:22.563 に答える