日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年3月14日土曜日

JavaScript:ブラウザが対応しているイベントの登録・削除方法を表示する方法

ラベル: , ,

イントロダクション

JavaScript にて、各種イベントをオブジェクトへ登録・削除するにはいくつかの方法があります。

それぞれ、利用できる環境や機能に違いがあるため、注意が必要です。

各種イベントをオブジェクトへ登録・削除する方法

大きく分けて、以下の 3 種類あります。

(1) Document Object Model (DOM) Level 0 : DOM要素のプロパティ 方式
(2) Internet Explorer 8以前：attachEvent, detachEvent 方式
(3) Document Object Model (DOM) Level 2 : addEventListener, removeEventListener 方式


このうち、(1) の DOM Level 0 の方式は、古くから使用されている方式であり、他の方式によるイベントの登録が行えない環境であっても使用することが出来る可能性があります。


ただし、(1) の DOM要素のプロパティ方式は、一つの要素の一つのイベントにつき、一つのイベントハンドラしか登録することができないなどといった機能制限があります。

そのため、目的によっては (1) の DOM Level 0 の方式では達成することができないため、(2) や (3) の attachEvent, detachEvent 方式 や addEventListener, removeEventListener 方式 を用いることになります。


ここで注意したいのは、Internet Explorer 8以前では、(3) のaddEventListener, removeEventListener 方式が使用できず、(2) のattachEvent, detachEvent 方式を使用しなければならないという点です。

そして、(2) のattachEvent, detachEvent 方式は Internet Explorer の独自仕様であり、Chrome や Firefox では使用することができません。


Internet Explorer 8以前は今からすれば十分に古いため、未サポートとして(3) のaddEventListener, removeEventListener 方式を使用したいところですが、2015年2月のデスクトップブラウザシェア(Net Applications調べ)によると、
Microsoft Internet Explorer のシェア : 57.38%
Microsoft Internet Explorer 11.0 のシェア : 22.79%
Microsoft Internet Explorer 10.0 のシェア : 5.43%
Microsoft Internet Explorer 9.0 のシェア : 8.03%


ということですから、Internet Explorer 8以前のデスクトップブラウザ全体に対するシェアは、

Internet Explorer 8以前のデスクトップブラウザ全体に対するシェア =
 Microsoft Internet Explorer のシェア -
 (Microsoft Internet Explorer 11.0 のシェア +
  Microsoft Internet Explorer 10.0 のシェア +
  Microsoft Internet Explorer 9.0 のシェア) = 21.13 %

ということになるでしょう。


Internet Explorer 8以前のデスクトップブラウザ全体に対するシェアは、21.13 % となり、まだ無視できるような割合ではないでしょう。

元データ：
IE11とIE6が増加 - 2月ブラウザシェア | マイナビニュース
http://news.mynavi.jp/news/2015/03/04/084/


Internet Explorer 8 が完全にサポート対象外になるのは、2016年1月12日のようです。

Microsoft、IE 8のサポートを2016年1月12日に終了へ - ITmedia ニュース
http://www.itmedia.co.jp/news/articles/1408/08/news058.html

あと、10か月(2015年3月14日現在)です。


そこでまだ必要になるのが、環境に応じて (3) のaddEventListener, removeEventListener 方式と、(2) のattachEvent, detachEvent 方式　を切り替えて使用することです。

そこで今回は、
  • addEventListener
  • removeEventListener

  • attachEvent
  • detachEvent

が使用できるかどうかをチェックし、使用可否を表示する JavaScript コードを作成してみました。


JavaScript:ブラウザが対応しているイベントの登録・削除方法を表示する


以下のコードによって、各イベント登録・削除方法の利用可否を表示します。

コード：

使用できるイベント登録・削除メソッドをチェック<br />
<script type="text/javascript">
<!--
    document.write("イベント登録系: <br />");
    document.write("window.addEventListener : " +
        (typeof window.addEventListener === "function" ? "使用可能" : "使用不可"));

    document.write("<br />");

    document.write("window.attachEvent : " +
        (typeof window.attachEvent === "function" ? "使用可能" : "使用不可"));

    document.write("<br />");
    document.write("<br />");

    document.write("イベント削除系: <br />");
    document.write("window.removeEventListener : " +
        (typeof window.removeEventListener === "function" ? "使用可能" : "使用不可"));

    document.write("<br />");

    document.write("window.detachEvent : " +
        (typeof window.detachEvent === "function" ? "使用可能" : "使用不可"));

    document.write("<br />");
//-->
</script>


Internet Explorer バージョン 9.0.8112.16421 での実行結果

使用できるイベント登録・削除メソッドをチェック
 イベント登録系:
window.addEventListener : 使用可能
window.attachEvent : 使用可能

イベント削除系:
window.removeEventListener : 使用可能
window.detachEvent : 使用可能


Firefox バージョン 36.0.1 での実行結果

使用できるイベント登録・削除メソッドをチェック
イベント登録系:
window.addEventListener : 使用可能
window.attachEvent : 使用不可

イベント削除系:
window.removeEventListener : 使用可能
window.detachEvent : 使用不可


Chrome バージョン 40.0.2214.115 m での実行結果

使用できるイベント登録・削除メソッドをチェック
イベント登録系:
window.addEventListener : 使用可能
window.attachEvent : 使用不可

イベント削除系:
window.removeEventListener : 使用可能
window.detachEvent : 使用不可


このように、Internet Explorer バージョン 9.0.8112.16421 では、すべての登録方法が利用可能なのに対して、Firefox バージョン 36.0.1, Chrome バージョン 40.0.2214.115 m では、attachEvent, detachEvent は使用できないことが分かります。


プログラム解説

ブラウザが対応しているイベントの登録・削除方法を表示するために、以下のコードを用いています。

    document.write("window.addEventListener : " +
        (typeof window.addEventListener === "function" ? "使用可能" : "使用不可"));


判定対象のメソッドに対して typeof 演算子を使用します。
メソッドが存在すれば、文字列"function" が得られるので、文字列"function"と厳密に比較(===)して、一致していれば使用可能、一致していなければ使用不可と画面上に表示しています。

今回は、かなり厳密にメソッドの存在を確認していますが、実用上はもう少し簡易な判定方法でも問題とならない場合もあります。


なお、現在お使いのブラウザに対して、上記のコードによるブラウザが対応しているイベントの登録・削除方法を表示するページを作成しました。

Dr.ウーパのコンピュータ備忘録: JavaScript:ブラウザが対応しているイベントの登録・削除方法を表示 
http://upa-pc.blogspot.jp/p/javascript-event-add-remove-check.html


是非、チェックしてみてください。


参考文献

イベントハンドラ | JavaScript プログラミング解説
http://so-zou.jp/web-app/tech/programming/javascript/event/handler/

event - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Event




EventTarget.addEventListener - Web API インターフェイス | MDN

attachEvent method (Internet Explorer)

EventTarget.removeEventListener - Web API インターフェイス | MDN

detachEvent method (Internet Explorer)


Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧｜Web制作 W3G
https://w3g.jp/blog/ie_supportlist


まとめ

このように、利用できるブラウザによって、イベントの登録方法を考慮する必要があります。


しかし、このような考慮を各組織、各個人、各開発ごとに行うのは大変です。

そこで、それらの環境による違いを吸収した、各種 JavaScript のライブラリを使用して開発を行うと、環境ごとに発生する問題の発生を防止出来たり、開発効率を向上することができます。


関連記事





関連する記事を、"ラベル"から探すことができます！

ラベル: , ,

この情報を、他の人にも伝える

シェアすることで、他の人がこの情報を見つけやすくなります！

このページのタイトルとURLのペアを取得:
ページとURLのペアを生成中...

投稿者
時刻:

コメントを投稿　（ここをクリックしてコメント投稿フォームを表示）

コメント投稿機能について

関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
表示

[表示形式]
クイックジャンプ
↑
ページトップ
このブログを検索
人気の投稿
新着情報
ブログ アーカイブ
←前・次→
の投稿