イベントハンドラのオーバーライド
イベントハンドラ登録の問題点
書式
- Mozilla系ブラウザでは「document.addEventListener(...)」
- 他のブラウザでは「document.onmousedown=myfunc;」
既存のイベントを上書きしてしまう
「document.onmousedown=myfunc;」という書き方は追加でなく上書きになるため×。
問題点の解決
解決:書式は標準規格に沿った形にする
ECMAScriptで「document.addEventListener(...)」が標準とされているので、この書式で登録出来るようにする。
解決:上書きではなく追加する
IEではattachEvent()、detachEvent()を使用する。
addEventListener() / removeEventListener()メソッドの定義
http://yupotan.sppd.ne.jp/web/dom2-msie.html より
if (document.all && document.attachEvent) { // MSIE を判別 // イベントオブジェクトの定義 function eEvent(e) { this.target=e.srcElement; // 着目要素を定義 this.cancelBubble=e.cancelBubble; // キャンセルの定義 this.keyVal=event.keyCode // キー操作の定義; Mozilla では通用せず !!! } // addEventListener を attachEvent に結び附ける function document_addEventListener(ev,func,bl) { this.attachEvent("on"+ev, function(){ var e=new eEvent(event); return func(e);}); } // removeEventListener を detachEvent に結び附ける function document_removeEventListener(ev,func,bl) { this.detachEvent("on"+ev, func); } // document 及び window オブジェクトで **EventListener を使えるようにする document.addEventListener=document_addEventListener; document.removeEventListener=document_removeEventListener; window.addEventListener=document_addEventListener; window.removeEventListener=document_removeEventListener; // (X)HTML文書中のすべての要素で **EventListener を使えるようにする var e=document.getElementsByTagName("*"); for(var i=0; i