イナヅマTVログ

[JavaScript]HTMLElementへ複数イベントをbindしたい

| 0件のコメント

jQuery だと簡単にできることも使わないと「あれ!?どうするんやろ」なことのひとつ。

CSS3 transition event を bind しています。

jQuery( "#example" ).on( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {} );

transitionend だけで済むようになればこんな醜いコードを書く必要は無くなります。

jQuery を使わない時は addEventListener を使いますが1つしかイベント設定ができません。

イベントを配列にセットして順に設定するしかなさそうです。
配列捜査にforEachを使いました。

var example = document.getElementById( "example" ),
  events = [
  "transitionend",
  "webkitTransitionEnd",
  "oTransitionEnd",
  "MSTransitionEnd"
];
 
function onTransitionEnd () {
 
  events.forEach( function ( event ) {
 
    example.removeEventListener( event, onTransitionEnd );
 
  } );
 
}
 
events.forEach( function ( event ) {
 
  example.addEventListener( event, onTransitionEnd, false );
 
} );

こんな感じでしょうか…
jQueryに比べるとだいぶコードがくなるのはしょうがない。

forEach

forEach 非対応ブラウザのことが気になる時は MDN を参考にすると良いかもです。
MDN: Array.forEach

久しぶりに見るとコードが書き換わってました。
ECMA-262, Edition 5 のコメントがあり、ES5 互換になったようです。

8行目のコードが気になる。

if ( this == null )

this が null でも undefined でも true 判定できるようにだろうと思うけど。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください