Event Utility: Simple Event Handling and Processing

YUI javascript

http://developer.yahoo.com/yui/examples/event/eventsimple.html

↑のデモページの青いボックスをクリックすると”Hello World”がポップアップします。
その下のリンクは、どちらも、同じhref属性を定義していますが
上は別ページへ遷移し、下のリンクは遷移せずにPopUpが開きます。

イベントユーティリティはここでは、次の二つが使われている。

  • 青いボックスにクリックイベントハンドラをアタッチ
  • 2番目のAリンク要素に、クリックしたときにリンクを抑制するためにYAHOO.util.Event.preventDefault()のイベントハンドラをアタッチ

Making Use of Event Utility's Basic Features

YUIイベントユーティリティはイベントドリブンアプリを作るのに簡単で強力。これは非常に簡単な例で、要素のイベントをリッスンするための使い方を示している。

まず、クリックする対象の div 要素をつくって、
次に、イベントオブジェクトを受け取る関数を作ります。
YAHOO.util.Event.addListenerを使って、イベントリスナーをつける要素のIDと、イベント名、リスナーとなる関数名を関連付けます。

ブラウザのデフォルトの動作を取り消したい場合は YAHOO.util.Event.preventDefault(e) を使用します。
stopEvent や stopPropagation も同様に使うことができます。