ブラウザ内のイベントはすべてオブジェクトの形で存在します。同様に、IEブラウザと標準のDOMブラウザ間でイベントオブジェクトの取得にも違いがあります。 IEブラウザでは、イベントオブジェクトはWindowsオブジェクトの属性イベントです。通常、次の方法はそれにアクセスするために使用されます。
コードコピーは次のとおりです。
op.onclick = function(){
var oevent = window.event;
}
これはWindow Objectプロパティですが、イベントオブジェクトはイベントが発生したときにのみアクセスできます。すべてのイベント処理機能が実行された後、オブジェクトは消えます。
標準DOMは、イベントオブジェクトを一意のパラメーターとしてイベント処理機能に渡す必要があると規定しています。 Firefoxブラウザでのイベントオブジェクトへのアクセスは、通常パラメーターとして使用され、コードは次のとおりです。
コードコピーは次のとおりです。
op.onclick = function(oevent){
}
したがって、両方のブラウザと互換性があるため、通常、次の方法が使用されます
コードコピーは次のとおりです。
op.onclick = function(oevent){
if(window.event)oevent = window.event;
}
イベントオブジェクトを取得した後、ブラウザは、マウスイベント、キーボードイベント、ブラウザイベントなど、一連のプロパティとメソッドを通じてさまざまなイベントを処理できます。待って
次のリストには、一般的なプロパティと方法がリストされています。
上記から、2種類のブラウザにはまだいくつかの類似点があることがわかります。たとえば、型属性はさまざまなブラウザと互換性があります。 「クリック」や「Mousemove」などの値を取得および返すイベントのタイプを示します。
これは、同じ機能で複数の種類のイベントを処理するのに非常に役立ちます。
次のように:同じ機能が複数のイベントを処理します。
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数ハンドル(oevent){
var disp = document.getElementById( "display");
if(window.event)oevent = window.event; //互換性を処理し、オブジェクトを取得します
if(oevent.type == "Click")
Disp.innerhtml += "あなたは私をクリックしました!";
else if(oevent.type == "mouseover")
Disp.innerhtml += "あなたは私のものに移動します";
}
window.onload = function(){
var op = document.getElementById( "box");
op.onclick = handle;
op.onmouseover = handle;
}
</script>
<div>
<div id = "box"> </div>
<p id = "display">私をクリックします</p>
</div>
上記のコードは、id = "box"のdivに2つのイベント応答関数を追加し、これらの2つのイベントは同じ関数です。
この関数では、最初にイベントオブジェクトの互換を取得し、次にタイプ属性ディスクをイベントの名前に使用することを検討します。
Shift、Alt、およびCtrlの3つのキーを検出する場合、2種類のブラウザーで使用される方法はまったく同じです。どちらもShiftKey、Altkey、およびCtrlkeyの3つの属性を持っています。
コードは次のとおりです。
コードコピーは次のとおりです。
var bshift = oevent.shiftkey;
var balt = oevent.altkey;
var bctrl = oevent.ctrlkey;
さらに、マウスポインターを取得する場合、両方のタイプのブラウザで使用される方法は同じであり、どちらもClientX、Clienty、ScreenX、およびScreenyが含まれます。
その中で、ClientXとClientyはクライアントエリアのマウスの場所を表しており、ブラウザのステータスバー、メニューバーなどは含まれていません。
コードは次のとおりです。
コードコピーは次のとおりです。
var iclientx = oevent.clientx;
var iclienty = oevent.clienty;
ScreenxとScreenyコンピューター画面全体のマウスの位置を参照し、コードは
コードコピーは次のとおりです。
var iscreenx = oevent.screenx;
var iscreeny = oevent.screeny;
多くの場合、開発者は、このオブジェクト、つまりイベントのターゲットによってイベントがトリガーされていることを知りたいと考えています。
<p>要素がオンクリックイベントハンドラー関数を割り当てると仮定すると、クリックイベントがトリガーされると<p>がターゲットと見なされます。
IEブラウザでは、ターゲットはイベントオブジェクトのsrcelementプロパティに含まれています。コードは次のとおりです。
コードコピーは次のとおりです。varotarget = oevent.srcelement;
標準DOMブラウザでは、ターゲットがターゲット属性に含まれています。コードは次のとおりです。
コードコピーは次のとおりです。varotarget = oevent.target;
イベントのターゲットを取得します
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数ハンドル(oevent){
var disp = document.getElementById( "display");
if(window.event)oevent = window.event; //互換性を処理し、オブジェクトを取得します
var otarget;
if(oevent.srcelement)//互換性を処理し、イベントを取得します
otarget = oevent.srcelement;
それ以外
otarget = oevent.target;
Disp.innerhtml + = "要素名:" + otarget.tagname + "<br>" + "要素コンテンツ:" + otarget.textcontent + "<br>"
+ "ノードのすぐ後:" + otarget.textContent + "<br>"
;
}
window.onload = function(){
var op = document.getElementById( "box");
op.onclick = handle;
}
</script>
<div>
<div id = "box">
ボックスコンテンツ
</div>
<p id = "display"> </p>
</div>
(サプリメント)要素オブジェクトのプロパティhttp://www.w3school.com.cn/xmldom/dom_element.asp
(サプリメント)要素オブジェクトの方法http://www.w3school.com.cn/xmldom/dom_element.asp
イベントのターゲットは2種類のブラウザで異なるため、コードは互換性を確保する必要があります。通常の慣行は、IFステートメントの条件としてオブジェクトを直接使用することです。コードは次のとおりです
コードコピーは次のとおりです。
if(oevent.srcelement)
otarget = oevent.srcelement;
それ以外
otarget = oevent.target;
この方法は、他のプロパティでも一般的に使用されます。