JavaScript のブラウザごとのイベントハンドラ登録の違いを吸収する [JavaScript]
◆JavaScript のブラウザごとのイベントハンドラ登録の違いを吸収する
さてさて。
ユーザーエージェント（ブラウザ）ごとに、イベントハンドラの登録の仕方が違うのは、attachEvent メソッドと addEventListener メソッドのエントリーで書きました。
でも、いちいちユーザーエージェントの違いを判別して、attachEvent メソッドと addEventListener メソッドを使い分けるのは、面倒ですよね。
てことで、この違いを簡単に吸収するメソッドを自作します。
これは、前回のエントリー「【遊び】逃げるボタン」で使っているものです。
【遊び】逃げるボタン [JavaScript]
◆【遊び】逃げるボタン
さて、たまには遊びましょう。
なかなか、ソネブロに JavaScript のプログラムを動く状態で記事ごとに実装する方法が見つからないので、別のページを用意しました。
リンク先のページを開くと、マウスカーソルから逃げ回るボタンが出てくるので、がんばって捕まえてポチっとしてください。
対応ブラウザは、Internet Explorer、Firefox、Opera、Safari、Google Chrome です。
removeEventListener [JavaScript]
◆object.removeEventListener メソッド
object.removeEventListener(event, function, capture)
addEventListener メソッドで登録したイベントハンドラを開放するのが、removeEventListener の役割。
attachEvent に対する detachEvent と同じ役割です。
addEventListener 同様、主要なブラウザの中では、Firefox、Safari、Google Chrome が対応しています。
Internet Explorer、Opera は対応していません（これらのブラウザでは、detachEvent を使います）。
組み込みクラスの中で、Object クラス、HTMLDocument クラス、Element クラスなどに準備されているメソッドで、イベントハンドラの開放に使います。
第一引数 event はイベント名文字列（プレフィックスに 'on' を含まない）、第二引数 function は実行するイベントハンドラ メソッド、第三引数 capture はキャプチャーです。
removeEventListener でイベントハンドラを開放するときは、ちゃんと addEventListener で登録したときと同じ引数を与えてやりましょう。
addEventListener [JavaScript]
◆object.addEventListener メソッド
object.addEventListener(event, function, capture)
これがなくちゃ JavaScript が始まらない、イベントハンドラの登録メソッド。
主要なブラウザの中では、Firefox、Safari、Google Chrome が対応しています。
Internet Explorer 8、Opera は対応していません（これらのブラウザでは、attachEvent メソッドを使います）。
組み込みクラスの中で、Object クラス、HTMLDocument クラス、Element クラスなどに準備されているメソッドで、イベントハンドラの登録に使います。
第一引数 event はイベント名文字列（プレフィックスに 'on' を含まない）、第二引数 function は実行するイベントハンドラ メソッド、第三引数 capture はキャプチャー（Boolean 型）です。
第一引数と第二引数は attachEvent メソッドとほぼ同じとして、第三引数のキャプチャーがおもしろいです。
detachEvent [JavaScript]
◆object.detachEvent メソッド
object.detachEvent(event, function)
attachEvent で登録したイベントハンドラを開放するのが、detachEvent の役割です。
attachEvent 同様、主要なブラウザの中では、Internet Explorer、Opera が対応しています。
Firefox、Safari、Google Chrome は対応していません（これらのブラウザは removeEventListener メソッドを使います）。
組み込みクラスの中で、Object クラス、HTMLDocument クラス、Element クラスなどに準備されているメソッドです。
第一引数 event はイベント名文字列（プレフィックスに 'on' を含む）、第二引数 function は登録されているイベントハンドラ メソッドです。
attachEvent と detachEvent を使うと、<body onload="hoge();"> なんていう恰好悪い書き方をしなくても、 window のロードを検知して JavaScript を起動する処理を、スマートに書くことができます。
･･････なお。
detachEvent でも、解放できないイベントハンドラがあるので、注意が必要です。
【注意】：匿名関数イベントハンドラの開放について、追記があります。
attachEvent [JavaScript]
object.attachEvent(event, function)
これがなくちゃ JavaScript が始まらない、イベントハンドラの登録メソッド。
主要なブラウザの中では、Internet Explorer、Opera が対応しています。
Firefox、Safari、Google Chrome は対応していません（これらのブラウザは addEventListener メソッドを使います）。
組み込みクラスの中で、Object クラス、HTMLDocument クラス、Element クラスなどに準備されているメソッドで、イベントハンドラの登録に使います。
attachEvent で登録したイベントハンドラを開放するには、detachEvent メソッドを使います。
第一引数 event はイベント名文字列（プレフィックスに 'on' を含む）、第二引数 function は実行するイベントハンドラ メソッドです。
･･････ところが。
問題は、イベントハンドラの実行順序なんです。
みみちゃん さん
-
nice! 116
記事 47
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
