JavaScript - なぜイベントハンドラが重要なのか [JavaScript]
◆JavaScript - なぜイベントハンドラが重要なのか
このブログ、JavaScript に関して、他のことより真っ先に、イベントハンドラ（イベントリスナー）の解説から始めました。
これは俺の独断と偏見ですが、JavaScript においては、クラスの定義やプロトタイプよりも、イベントハンドラ（イベントリスナー）のほうが、よっぽど重要だと思っています。
今回は、その理由についてお話します。
ブラウザごとのイベント発生要素取得の違いを吸収する [JavaScript]
◆ブラウザごとのイベント発生要素取得の違いを吸収する
もう。
event.target とか、event.srcElement とかさ。
使い分けるの面倒だから、Event クラス拡張して、関数で持ってきちゃおうよ。
･･････というのが、今回の趣旨です。
srcElement [JavaScript]
◆event.srcElement プロパティ
event.srcElement
前回のエントリーで、addEventListener や attachEvent で動的に登録されたイベントハンドラが、イベント発生元の要素を知るために使う event.target プロパティを取り上げました。
そして、event.target プロパティが、Internet Explorer に対応していないことも書きました。
そこで使えるのが、event.srcElement プロパティです。
ところが。
やっぱりこいつにも、対応していないブラウザがあったり、ちょっと気になる動作をしたりする点があります。
target [JavaScript]
◆event.target プロパティ
event.target
JavaScript のイベントハンドラ（イベントリスナー）を addEventListener や attachEvent で目的のオブジェクト インスタンスに登録した場合、そのインスタンスに該当するイベントが発生すると、イベントハンドラ（イベントリスナー）が起動して、第一引数でイベントに関する情報（Event クラスのインスタンス）を受け取ることができます。
このとき、複数の要素に同じイベントハンドラを登録していたりしたら、そのイベントの発生元の要素がわからないと、イベントハンドラ側でどうしていいかわからない場合がありますよね。
そのときに、イベント発生元の要素を教えてくれるのが、event.target プロパティです。
ところが。
こいつにも、対応していないブラウザがあったり、ちょっと気になる動作をしたりする点があります。
JavaScript イベントハンドラの this について [JavaScript]
◆JavaScript イベントハンドラの this について
いや～、JavaScript のイベント関連のエントリーだけで、ずいぶん記事が書けるもんですね；；；。
今回は、けっこう JavaScript の中ではよく使う、this の注意点をメモします。
"this" というのは、自分自身のインスタンスを指す･･････というのが、JavaScript の中での普通の使い方です。
例えば、Element クラスのメソッド内で処理をしている場合、通常は this はその element インスタンスを指します。
しかし、イベントハンドラは例外です。
ほとんどイヤがらせ for Safari Only [JavaScript]
◆ほとんどイヤがらせ for Safari Only
今回は、俺が自分の環境で経験した、JavaScript のユーザーエージェント（ブラウザ）ごとに異なる挙動の一例です。
手元の環境で、Internet Explorer、Firefox、Opera、Safari、Google Chrome の中で、（環境や OS にもよると思いますが）Safari を除くブラウザは普通に動いてくれるのに、 Safari だけ「ほとんどイヤがらせ」になってしまった例を紹介します。
なお、今回のエントリーは、Safari の性能や機能に対する批判が目的ではありません。
Safari が特別劣ったブラウザとも思っていません。
これは、俺が開発中に、俺の環境でたまたま発生した事例であって、他の環境では発生しないかもしれないし、あるいは他のブラウザでも、まだ俺の知らない深刻な問題があるかもしれませんし。
その点をご理解の上、お読み頂ければと思います。
JavaScript のブラウザごとのイベントハンドラ開放の違いを吸収する [JavaScript]
◆JavaScript のブラウザごとのイベントハンドラ開放の違いを吸収する
さてさて。
ユーザーエージェント（ブラウザ）ごとに、イベントハンドラの登録や開放の仕方が違うのは、以前のエントリーでも書きました。
前回のエントリーでは、イベントハンドラの登録である attachEvent メソッドと addEventListener メソッドの違いを簡単に吸収する処理の実装例を掲載しました。
今回は、イベントハンドラの開放である detachEvent メソッドと removeEventListener メソッドの違いを吸収します。
これは、前々回のエントリー「【遊び】逃げるボタン」で使っているものです。
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 で登録したときと同じ引数を与えてやりましょう。
みみちゃん さん
-
nice! 116
記事 47
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
