すべての JavaScript フレームワークは、クロスブラウザー イベント処理を実装しているため、古いスタイルのイベントのインライン追加から離れ、合理化された線形アプローチを使用することが推奨されます。リスト 6 の jQuery の例を見てください。この例では、hover イベントを使用して div 要素を強調表示しています。
リスト 6: jQuery を使用してホバー イベントをアタッチする
$('#the-box').hover(function() {
$(this).addClass('ハイライト');
}、 関数（） {
$(this).removeClass('ハイライト');
});
これは jQuery の特別なイベントであり、2 つの関数が提供されていることがわかります。最初の関数は onMouseOver イベントが発生したときに呼び出され、2 番目の関数は onMouseOut イベントが発生したときに呼び出されます。これは、ホバー用の標準 DOM イベントがないためです。クリックなどのより一般的なイベントを見てみましょう (リスト 7 を確認してください)。
リスト 7: jQuery を使用してクリック イベントをアタッチする
$('#the-button').click(function() {
alert('ボタンを押しました!');
});
ご覧のとおり、インスタンスには関数パラメーターが 1 つだけあります。 jQuery のほとんどのイベントは、jQuery のイベント ハンドラーを使用して同じ方法で処理されます。コンテキストは、どのオブジェクトがイベントをトリガーしたかを参照します。一部のフレームワークはこのようには機能しません。プロトタイプの場合、リスト 7 のコードはリスト 8 とまったく同じになります。
リスト 8: プロトタイプを使用したクリック イベントの付加
$('ボタン').observe('クリック', function(e) {
alert('ボタンを押しました!');
});
最初に気づくのは、クリック関数はなく、自身を参照する前にイベント パラメーターを受け入れる観察関数があることです。また、この関数はパラメーター e を受け入れます。ここで、コンテキストはイベントをトリガーした要素を参照します。どのように動作するかを確認するために、プロトタイプを使用してリスト 6 のコードを書き直してみましょう (リスト 9 を参照)。
リスト 9: プロトタイプを使用したホバー イベントのアタッチ
$('ボックス').observe('マウスオーバー', function(e) {
var el = イベント.要素(e);
el.addClassName('ハイライト');
});
$('ボックス').observe('マウスアウト', function(e) {
var el = イベント.要素(e);
el.removeClassName('ハイライト');
});
jQuery も異なります。プロトタイプ ライブラリでは Event.element() 関数を使用するのに対し、$ 関数を使用するだけでコンテキスト変数を取得できます。さらに、mouseover イベントと Mouseout イベントを分離する必要があることに気付きました。
この記事のチュートリアルの一部を通じて、関数がインラインで作成され、名前が付けられていないことがわかります。これは、再利用できないことを意味し、Prototype のホバー例は、名前付き関数の使用方法を確認する機会にもなります。リスト 10 はこの方法を示しています。
リスト 10: プロトタイプを使用したホバー イベントの改善
この時点では、関数を 1 つだけ定義する必要があることがわかります。これは、mouseover イベントと Mouseout イベントの両方によって呼び出されます。この関数は、要素に「ハイライト」クラス名があるかどうかを判断し、その結果に基づいて要素を追加または削除します。パラメータ e が暗黙的に渡されていることにも気づくでしょう。言い換えれば、あいまいな引数をobserv関数に渡したことになります。
転載アドレス: http://www.denisdeng.com/?p=720
元のアドレス: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
関数 toggleClass(e) {
var el = イベント.要素(e);
if(el.hasClassName('ハイライト'))
row.removeClassName('ハイライト');
それ以外
row.addClassName('ハイライト');
}
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);