問題タブ [event-delegation]

他の動的に作成されたデータテーブルとのユーザーインタラクションに基づいてデータのテーブルを動的に作成するgreasemonkeyスクリプトを作成しようとしています。私の問題は、テーブルを作成するたびに2つのパスを作成する必要があることです。1つはテーブルを作成するためのもので、もう1つは、イベントハンドラーを（idで）追加して追加するテーブル内のすべてのオブジェクトを取得するためのものです。それらへのさまざまなイベントハンドラー。

onClickたとえば、テーブルを作成してHTMLに挿入する前に、テーブルtdにイベントを追加しようとすると、「コンポーネントが利用できません」という例外が発生します。

これは非常に面倒です。なぜなら、ハンドラーを追加するために2回目のパスを作成するときに、IDのリストとそれらの要素に対して何をすべきかを個別に維持するか、に基づいて、私が知っている命名規則を開発する必要があるからです。 id、要素で何をすべきか。

これを行うためのより良い方法が必要です。私はまだそれを理解していません。誰かアイデアはありますか？

ユーザーからの投稿をページに表示します。クラス名「posts」のメインの親divがあり、各投稿はクラス名「row」のdivに出力されます。したがって、div.posts 内にはたくさんの div.row があります。それぞれこんな感じ。

CSS を介して、actions-column はデフォルトで display:none に設定されています。ユーザーのマウスオーバーが投稿 (div.row) の場合、アクション列を表示したいと思います。私の最初の方法は、各行に対してもマウスオーバーを設定することでした。これは、ブラウザーに負担をかけ、速度を低下させていました。私はいくつかの調査を行い、イベント委任に出くわし、試してみることにしました。これまでのところ、どの行がターゲットにされているかを特定できますが、クラス 'actions-column' でその子 div をターゲットにする方法がわかりません。

これまでのコード...

新しい JavaScript ライブラリを試してみたい。j Query 1.3 の "Live" eventsを使用した (そして気に入った)ので、イベント システムにイベント委任を組み込む次のライブラリを使用したいと思います。ウィキペディアの JS ライブラリ比較は、ここでの仕事に失敗します。

MooTools は 2.0 で取得しているようです。他の人はどうですか？

このコミュニティ wiki を作成しています。リストを埋めるのを手伝ってください。

プロトタイプ: いいえ

jQuery: 1.3 以降

MooTools: 2.0 以降

ExtJS: はい

通常、ボタンクリックのハンドラーは次のように記述します。

ただし、イベントデリゲーターの場合、次のような関数でイベントに応答するには、次のようにします。

私が混乱しているのは、この委任関数を呼び出すイベントを定義するための正しい構文です-これ？（A）：

またはこれ？（B）：

どちらが正しいのか、そしてその理由は？

すぐに使用できるJQueryイベント処理ではなく、イベント委任をいつ使用すべきかについて混乱しています。

JQueryでは非常に簡単なので、私は常にイベントハンドラーを使用したいと思っています。

例えば：

イベントの委任は、実際にはそれほど複雑ではありません。

しかし、それは直感的ではないようです。

イベント委任をいつ使用するかについての簡単な経験則はありますか？私はそれのポイントを本当に理解していないと思います。

マークアップが次のようになっている場合:

そして、次の jQuery を定義します。

1. いくつのイベントリスナーが確立されていますか? 1または3？

2. 3 つではなく 1000 個のボタンがある場合、代わりにイベント委任を使用する必要がありますか?

3. それらのクラスがマークアップに多数の要素を含んでいる場合、要素のクラスで jQuery 呼び出しを定義しないのは、パフォーマンスの観点から最善ですか?

次のような要素を含むページがあります。

コードは次のようになります。

したがって、.activator またはその子要素のいずれかをクリックして、.activator で関数を呼び出したい場合、2 つの if 句を組み合わせる方法がないかどうか疑問に思っています。if (e.match('.class, .class *') { doStuff(e.upOrSelf('activator')); } のようなもの

upOrSelf メソッドで Element を拡張できると思います。ただし、可能であれば、非標準のカスタマイズは行いたくないです。

いくつかの要素を削除するためのこのコードがあります

var $tab_items = $("ul:first li",$tabs).droppable{ 許容値: 'タッチ' ,....

それは問題なく動作しますが、新しい要素がこのイベントにバインドされていないため、ajax または JavaScript によって別のボタンをロードするときに問題が発生します。

他の同様の状況では、livequery (イベント委任) を使用して解決策を見つけましたが、関数をアタッチしたくないため、ここでは不可能です。最初の行のコードに同じものをアタッチしたいのです。

新しいオブジェクトが読み込まれるたびに dropabble を作成するよりも優れたソリューションはありますか?

JavaScript でのイベント委任について説明してもらえますか? また、どのように役立つのでしょうか?

私はdivを持っています

ここで、イベント委任とバブリングの概念を使用して、myDiv、myLink、anotherDiv のいずれかからのクリックをインターセプトしたいと考えています。

ベスト プラクティスによると、これは、ドキュメント自体でグローバルにクリックをリッスンすることで実行できます (したがって、「委任」という用語が使われます)。

上記のアラートの質問を参照してください。クリックバブルという印象を受けました。そして、ドキュメントが実際に私のクリックを受け取り、委任を開始するため、多少そうです。しかし、myLink と anotherDiv のクリックのバブリング メカニズムは、if ステートメントが作動しないため、機能していないようです。

それとも、次のようなものですか: クリックすると、クリックされた src 要素から割り当てられた委譲オブジェクト (この場合はドキュメント) まで、1 ステップだけバブルしますか? その場合、次のように委任を処理する必要があります。

しかし、多くの 'my​​Div' ハンドラーとおそらく他のハンドラーが必要になるため、この種の委任の目的は無効になります... 'document' イベント委任オブジェクトを 1 つだけ持つのは非常に簡単です。

誰でもこれがどのように機能するか知っていますか?