JavaScriptでイベントハンドラを追加するメソッドとしてaddEventListnerメソッドがある。 但し、このaddEventListnerはIE(IE9を除く)以外のブラウザで使え、IE8では代わりにattchEventメソッドを使わなければならない。
IE9になってやっとaddEventListnerを使えるようになったが、IE8の利用者のためにattchEventも組み込んでおく必要があり、過去の仕様に振り回されることになる。
IE8でも対応するには次のようなクロスブラウザ対応関数を用意しておけばよい。
<script type="text/javascript">
/* クロスブラウザ対応関数 */
function addListener(elem,ev,listener){
if(elem.addEventListener){ // IE8以外のブラウザ対応
elem.addEventListener(ev,listener,false);
}
else if(elem.attachEvent){ // IE8対応
elem.attachEvent('on' + ev,listener);
}
else{
throw new Error('イベントリスナに未対応です。');
}
}
/* 使用例 */
/* load完了時にinit関数の実行を定義する */
addListener(window,'load',init);
function init() {
/* 「ダイアログ表示」ボタンのクリックでメッセージ表示を定義する */
addListener(document.getElementById('btn'),'click',function() {
window.alert('ボタンがクリックされました。');
});
}
</script>
<form>
<input id="btn" type="button" value="ダイアログ表示" >
</form>