2011-09-09 22 views
0

シナリオ: jQueryを使用すると、特定のイベントに対して複数のバインドが実行されます。イベントがトリガされると、指定された機能はPERトリガ後に起動する必要があります。jQueryトリガ機能を1回だけ実行する

チャレンジ: jQueryトリガの仕組みは、トリガが呼び出されたときに、関連する関数がそのイベントが持つバインドの数と同じ回数だけ発生するということです。各トリガーで、関数は1回だけ起動されます。どのようにこれを達成することができます。このシナリオでは、イベントがトリガーされるたびに関数を起動する必要があるため、「1」は機能しません。

ありがとうございます。

更新日: もっと具体的ではないことをお詫び申し上げます。

ページがロードされるときに、カスタムイベントが発生したときにページのさまざまな要素が登録されるため、参加する必要があります。

カスタムイベントがトリガされる/発生すると、登録されたすべての要素に対して何らかのタスクを実行する関数が呼び出されます。

例: 異なるパーシャルビュー(MVC)から埋め込まれた要素に注意してください。文書準備で

<html> 
<a href="#" id="triggerelement">Trigger element</a> 
<div id="element1" data-join="aevent">something 1</div> 
<div id="element2" data-join="aevent">something 2</div> 
<div id="element3" data-join="aevent">something 3</div> 
<div id="element4" data-join="aevent">something 4</div> 
</html> 
  1. - イベントにバインドするために、「データ・参加」「aevent」を持つすべての要素。
  2. トリガー( "aevent")が呼び出されると、バインディング関数は "aevent"に参加しなければならないすべての要素を収集し、それらの上で何らかの操作を実行する必要があります。私はに実行しています

2つの問題:

  1. 何の要素に "バインド" へ - $バインド(?)。理由:複数の要素がこのカスタムイベントを発生させる可能性があり、イベントを発生させる要素はわかってはいけません。 1つの考えは - $(document).bind/$(document).triggerでした。これが最善のアプローチですか? $()はjQueryを使用して

  2. 。トリガがどのように私はそれだけでコールごとに一度ではなく、そのイベントにバインドされた各要素の関連する機能を呼び出すことを確認することができますと呼ばれています。

+0

複数回バインドを停止しますか?または、 'var myTrigger = function(){}'を使用し、 'event + = myTrigger'を一度バインドしますか? (あるいは間違っていると思いますか?)また、 "複数の"バインディングを "フィルタリング"する "プロキシ"ハンドラをバインドすることもできます。 –

+0

それはあなたのためのカスタムイベントですか? – voigtan

答えて

2

機能をバインドするときに名前空間を使用しようとしましたか?

$('a').bind("click.name1", function() { 
    alert("name1"); 
}); 
$('a').bind("click.name2", function() { 
    alert("name2"); 
    $("a").unbind("click.name1"); 
}); 

http://jsfiddle.net/hssHZ/

+0

umm ..もし私がバインドを解除したら、私はその要素でその出来事を再び起こすことができません。右?私はそれを望んでいない。 – Pakora

1

これはあなたが考えているものですが、ここではあなたのことが可能です何のアイデアを与えるために何かあれば、私は手掛かりを持っていません。独自のコールスタックを簡単に維持管理できます。コールスタックに3つの関数が追加され、ポップリンクをクリックすると、スタックの先頭にあるものが実行されます。

var callstack = []; 

function popcallstack(e) 
{ 
    e.preventDefault(); 
    return callstack.pop()(); 
} 

//bind once 
$('#foo').click(popcallstack); 

callstack.push(function() { alert('executed1') }); 
callstack.push(function() { alert('executed2') }); 
callstack.push(function() { alert('executed3') }); 

http://jsfiddle.net/uQumm/1

おそらくこれはあなたが後にしているコントロールを提供します。ああ、あなたは、jQueryが基本的にあなたのためにこのようなことをすることを知っておくべきです。これは単なる意地悪なことをしようとしていて、それをそのまま「コントロールする」必要がある場合にだけ実証的です。

0

jQueryを使用している場合、ワンタイムイベントを実装する既知のone()イベントバインディングメソッドがあります。

$("#myelement").one("click", function() { alert("You'll only see this once!"); }); 

自己削除ハンドラ
あなたは生のJavaScriptを使用している場合は、任意のハンドラ関数は、単一のコード行を使用して自分自身を削除することができます

document.getElementById("myelement").addEventListener("click", handler); 
// handler function 
function handler(e) { 
    // remove this handler 
    e.target.removeEventListener(e.type, arguments.callee); 

    alert("You'll only see this once!"); 
} 

ハンドラのイベント引数の名前は仮定'e'行:

e.target.removeEventListener(e.type, arguments.callee); 

初めてのハンドラは削除されますoked。ハンドラに使用するイベントのタイプや名前は問題ではありません。インラインの匿名関数でもあります。

注IE8以下では動作しない標準のイベントコールを使用しました。 OldIEはdetachEventを呼び出す必要があり、型には接頭辞「on」が必要です。 "onclick"しかし、もしあなたがoldIEをサポートしているなら、あなたはおそらくjQueryか独自のカスタムイベントハンドラを使用しています。

柔軟性が必要な場合は、自己削除ハンドラーが最適です。さまざまな条件の後に、特定のイベントタイプをアンフックしたり、ハンドラを削除したりするだけです。 2回以上のクリック

ワンタイムイベント作成機能
あなたはすべてのハンドラ関数にイベント除去ラインを追加するのが面倒や物忘れかもしれません。のは、私たちのためにハードワークを行うワンタイム関数を作成してみましょう:

// create a one-time event 
function onetime(node, type, callback) { 
    // create event 
    node.addEventListener(type, function(e) { 
     // remove event 
     e.target.removeEventListener(e.type, arguments.callee); 
     // call handler 
     return callback(e); 
    }); 

} 

我々はワンタイムイベントのみを必要とするたびに私たちは今、この機能を使用することができます。

// one-time event 
onetime(document.getElementById("myelement"), "click", handler); 



// handler function 
function handler(e) { 
    alert("You'll only see this once!"); 
} 

使用すると、1つを必要としませんがJavaScriptの開発者にはいくつかのオプションが用意されています。