だから、これはちょっと大ざっぱです。
免責事項: 私は MooTools の開発者ではありません。ほとんど触れたことはありません。
MooTools イベントを発生させようとしています。
JavaScript ブックマークレットを使用して AtTask に自動入力しようとしているタイム トラッキング グリッドがあります。ページの入力要素に数値を挿入するように記述しましたが、JS を介して値を挿入するため、MooTools がスケジュールしたイベントが発生せず、変更が認識されないという問題が発生しています。その結果、ページを保存しようとすると、値が保存されません。
イベントについて調べるためにVisualEventを使用しました。
する方法はありますか
では、リストがあり、Web ページが次のようになっているとしましょう。
各リスト項目にクリック イベントを追加します。
$$('.list-item').addEvent('click', function(e) {
console.log("You clicked me!");
});
これらの項目を太字にして、クリック イベントに応答する項目を太字にして、何が起こっているかを視覚化できるようにします。
ここで、さらにいくつかの項目を追加すると、イベントは新しい要素に自動的に関連付けられないため、リストは次のようになります。
この問題は、イベント委任と呼ばれるものによって解決されます。
JavaScript イベントは「バブル」します。これは、イベント ターゲットの親ノードまで続くことを意味します。イベント ターゲットがイベントにアタッチされているため、イベントを外側の親要素にアタッチすることが可能になり、イベント ターゲットが選択したセレクターと一致するかどうかがチェックされます。
そのため、リスト項目ごとに 1 つずつ一連のイベントをアタッチする代わりに、リスト項目がクリックされたときにのみ発生する単一のイベントをリスト全体に追加します。
これは、MooTools のイベント委譲構文を使用して行うことができます (確かに、これまでで最高のインターフェイスではありません)。
イベント ハンドラーを移動して、各項目を個別にではなく、親要素に配置してみましょう。
$('myList').addEvent('click', function() {
console.log("You clicked somewhere on my list!");
}
これは、ユーザーがリスト項目だけでなく、親内の任意の場所をクリックした場合でも発生します。何が起こるかを制限するために、MooTools のイベント委譲構文を使用します (これは確かにかなり奇妙です)。
$('myList').addEvent('click:relay(.item)', function() {
console.log("You clicked on a list item!");
}
Eve.jsを使用することもできます。これは、MooTools の上で実行される、スコープ指定されたイベント委任フレームワークです。
Eve のコードは次のようになります。
Eve.scope('#myList', function() {
this.listen('click', '.item', function() {
console.log("You clicked on a list item!");
});
});