IE8でJavaScriptのaddEventListener()が使えない

最近はIE8が対象ブラウザに入ることは少なくなっていると思いますが、IE8以下でaddEventListener()が使えないことを知らなかったので、IE8での対応方法をメモしておきます。

サンプルコード

まずは特に対応しなかった場合です。

HTML

<button id="btn">ボタン</button>

JavaScript

var btn = document.getElementById('btn');
btn.addEventListener('click', btnClick, false);

function btnClick() {
	alert('クリックしました');
}

開発者ツールのIE8で確認すると、consoleに『オブジェクトは ‘addEventListener’ プロパティまたはメソッドをサポートしていません。』と表示されていました。
対応前のデモページ

対応する場合、attachEvent()を使用します。

JavaScript

var btn = document.getElementById('btn');

if(btn.addEventListener) {
	btn.addEventListener('click', btnClick, false);
} else if(btn.attachEvent) {
	btn.attachEvent('onclick', btnClick);
}

function btnClick() {
	alert('クリックしました');
}

addEventListener()が使えるブラウザではaddEventListener()、使えない場合はattachEvent()でイベントリスナを登録しています。
対応後のデモページ

【参考サイト】

• EventTarget.addEventListener – Web API インターフェイス | MDN
• EventTarget.attachEvent() – Web API インターフェイス | MDN
• IE8以下でaddEventListenerが使えないので – Qiita