読者です 読者をやめる 読者になる 読者になる

Life, Education, Death

プログラミング以外でも思ったことをつらつらと書きたい

YUIのバグか!?Yahoo.util.Eventを使っている

YUIの仕様らしい

結論から言って早とちり><


javascriptのブラウザ間の互換性を取り持ってくれるライブラリはたくさんあってprototype.jsがお気に入りだった。UIもまとめて作ることになってのでアニメーションとかが出来るのがまとめっているYUI Libraryに鞍替えした。


Yahoo.util.Eventにはイベント関係のメソッドが揃っていて、addListenerがprototype.jsのEvent.observeにあたる。
http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js:ソースを見るとブラウザによってaddEventListenerかattachEventか振り分けて実行するようになっている。

YUIでは?

ブラウザを振り分けるときには当たり前の実装だと思っていたらYUIは違った・・・
(ソースをどこから参照していいかわからなかったので実装イメージで)
>|js
var events = [function(){alert('1')},function(){alert('2')},function(){alert('3')}];
window.onload = function(e){
for( i=0; i

簡単に書いたイメージコードだが、こんな感じに配列に格納してイベントをキックするメソッドをonXXXXに代入している。
しかも、このキックするメソッドないでイベントリスナーの戻り値を受け取っているものの、returnしていないので
イベントを止めるために、渡すコールバック関数に

function(){
    alert("hoge");
    return false;
}

としてもイベントが止まらないのがで注意。
どうするかというと、Yahoo.util.Event.stopPropagationやYahoo.util.Event.preventDefaultをコールして止める仕様の模様。
(両方をコールするYahoo.util.Event.stopEventというメソッドもある)


記憶が正しければ、return falseしてもうまく止められなかったことがあったような気がしたので、いいのかもしれない。
気になるのはaddEventListenerのようにnativeな関数をコールしていないが、実行速度はどうなんだろう?ということ。機会を見つけて検証してみたいなと思うところ。


ちなみに、同じエレメントの同じイベントに複数のリスナーを登録したときには他のリスナーを止める手段はない

最後

なんだか、2.5.1のバージョンでは

<form>
  <button>送信</button>
</form>

このbuttonにイベントリスナーを登録して、Yahoo.util.Event.stopEventをコールしてもうまく止まらない気がする。
(2.5.2では問題なかった)