イベントハンドラのオーバーライド

javascript

イベントハンドラ登録の問題点

書式
  • 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