javascriptブラウザ対応教程のイベント処理

1.window.イベント
【分析説明】まずコードを見ます.

 
  
function et() 
  
{ 
  
alert(event);//IE: [object] 
  
} 
  
 
 

以上のコードはIEで実行された結果、「object」ですが、Firefoxでは実行できませんでした.
IE中のイベントはwindowオブジェクトの属性の一つとして直接使用できますが、FirefoxではW 3 Cのモデルが使用されています.これは、イベントを伝達する方法を通じて、つまりイベント応答のインターフェースを提供する必要があります.
【対応処理】イベント判定を追加し、ブラウザによって正しいイベントが得られます.

 
  
function et() 
  
{ 
  
evt=evt?evt:(window.event?window.event:null); 
  
　　//  IE Firefox 
  
alert(evt); 
  
} 
  
 
 

2.キーボード値の取得
【解析説明】IEとFirefoxがキーボード値を取得する方法は違っており、Firefoxでのevent.whichはIEでのevent.keyCodeに相当することが理解できる.お互いの違いについては、「キーボードイベントにおけるkeyCode、whichとcharCodeの互換性テスト」を参照してください.
【互換処理】

 
  
function myKeyPress(evt){ 
  
//  IE Firefox  keyBoardEvent   
  
evt = (evt) ? evt : ((window.event) ? window.event : "") 
  
//  IE Firefox  keyBoardEvent      
  
var key = evt.keyCode?evt.keyCode:evt.which; 
  
if(evt.ctrlKey && (key == 13 || key == 10)){ 
  
　　　　　　//     Ctrl     
  
//do something; 
  
} 
  
} 
  
 
 

3.イベントソースの取得
【解析説明】イベント依頼を使用した場合、イベントソース取得により、イベントの要素はどのようなものなのかを判断しますが、IEの場合、イベントオブジェクトにはsrcellement属性がありますが、targt属性はありません.Firefoxでは、evenオブジェクトにtarget属性がありますが、srcelement属性はありません.
【互換処理】

 
  
ele=function(evt){ //            
  
evt=evt||window.event; 
  
　　return 
  
　　(obj=event.srcElement?event.srcElement:event.target;); 
  
} 
  
 
 

4.事件の傍受
【分析説明】イベント傍受処理において、IEはatachEventとdetachEventの2つのインターフェースを提供し、FirefoxはaddEvent ListenerとremoveveveveveventListenerを提供する.
【互換性処理】最も簡単な互換性のある処理はパッケージという二つのインターフェースです.

 
  
function addEvent(elem, eventName, handler) { 
  
　　if (elem.attachEvent) { 
  
　　　　elem.attachEvent("on" + eventName, function(){ 
  
　　　　　　　　　　　　　　　　　　　　handler.call(elem)}); 
  
　　　　//        call()， this  elem 
  
　　} else if (elem.addEventListener) { 
  
　　　　elem.addEventListener(eventName, handler, false); 
  
　　} 
  
} 
  
function removeEvent(elem, eventName, handler) { 
  
　　if (elem.detachEvent) { 
  
　　　　elem.detachEvent("on" + eventName, function(){ 
  
　　　　　　　　　　　　　　　　　　　　handler.call(elem)}); 
  
　　　　//        call()， this  elem 
  
　　} else if (elem.removeEventListener) { 
  
　　　　elem.removeEventListener(eventName, handler, false); 
  
　　} 
  
} 
  
 
 

特に注意したいのは、Firefoxでは、イベント処理関数のthisは、被傍受要素自体を指すが、IEではない場合は、コールバック関数を使用して、現在のコンテキストを傍受要素に向けることができる.
5.マウスの位置
【分析説明】IEの下で、evenオブジェクトはx,y属性がありますが、pageX,pageY属性はありません.Firefoxでは、evenオブジェクトはpageX、pageY属性がありますが、x、y属性はありません.
【互換処理】IE下のevent.xまたはFirefox下のevent.pageXの代わりに、mX(mX=event.x?event.pageX)を使用する.複雑な点は絶対位置も考慮しなければなりません.

 
  
function getAbsPoint(e){ 
  
var x = e.offsetLeft, y = e.offsetTop; 
  
while (e = e.offsetParent) { 
  
x += e.offsetLeft; 
  
y += e.offsetTop; 
  
} 
  
alert("x:" + x + "," + "y:" + y); 
  
}