Tutorial zur JavaScript-Browserkompatibilität, Ereignisbehandlung, Grundkenntnisse

1. window.event

[Analyseanweisungen] Schauen wir uns zunächst einen Code an

Code kopieren Der Code lautet wie folgt:

Funktion et()
{
Alarm (Ereignis);//IE: [Objekt]
}

Das Ergebnis der Ausführung des obigen Codes im IE ist [object], er kann jedoch nicht in Firefox ausgeführt werden.

Da im IE Ereignisse direkt als Attribut des Fensterobjekts verwendet werden können, in Firefox jedoch das W3C-Modell verwendet wird, das Ereignisse durch Übergabe von Parametern weitergibt, müssen Sie eine Ereignisantwortschnittstelle bereitstellen.

[Kompatibilitätsverarbeitung] Ereignisbeurteilung hinzufügen, um das richtige Ereignis für verschiedene Browser zu erhalten:

Code kopieren Der Code lautet wie folgt:

Funktion et()
{
evt =evt?evt:(window.event?window.event:null);
　//Kompatibel mit IE und Firefox
alert(evt);
}

2. Tastaturwert abrufen

[Analyseerklärung] IE und Firefox verfügen über unterschiedliche Methoden zum Abrufen von Tastaturwerten. Es versteht sich, dass event.which unter Firefox dem event.keyCode unter IE entspricht. Zu den Unterschieden siehe „Kompatibilitätstest von keyCode, which und charCode in Tastaturereignissen“

【Kompatible Verarbeitung】
Code kopieren

Code kopieren Der Code lautet wie folgt:

function myKeyPress(evt){
//Kompatibler IE und Firefox erhalten das keyBoardEvent-Objekt
evt = (evt) ? evt : ((window.event) ? window.event : "")
//Kompatibel mit IE und Firefox, um den Schlüsselwert zu erhalten des keyBoardEvent-Objekts
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　// Drücken Sie gleichzeitig Strg und Eingabetaste
//etwas tun;
}
}

3. Ereignisquellen abrufen

[Analyseerklärung] Bei Verwendung der Ereignisdelegation wird die Ereignisquelle abgerufen, um zu bestimmen, von welchem ​​Element das Ereignis stammt. Unter IE verfügt das Ereignisobjekt jedoch über das srcElement-Attribut, unter Firefox jedoch über kein Zielattribut Zielattribute, aber es gibt kein srcElement-Attribut.

【Kompatible Verarbeitung】

Code kopieren Der Code lautet wie folgt:

ele=function(evt){ // Erfassen Sie das aktuelle Ereignis. Das Aktionsobjekt
evt=evt||window.event;
return
　(obj=event.srcElement?event.srcElement:event.target;);
}

4. Ereignisüberwachung

【Analyseerklärung】In Bezug auf das Abhören und Verarbeiten von Ereignissen bietet IE zwei Schnittstellen: attachmentEvent und detachEvent, während Firefox addEventListener und removeEventListener bereitstellt.

[Kompatibilitätsverarbeitung] Die einfachste Kompatibilitätsverarbeitung besteht darin, diese beiden Schnittstellensätze zu kapseln:

Code kopieren Der Code lautet wie folgt:

function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" eventName, function(){
　handler.call(elem)});
//Die Rückruffunktion call() wird hier verwendet. Lassen Sie dies auf elem verweisen
　} 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)});
//The Hier wird ein Rückruffunktionsaufruf verwendet (), dieser zeigt auf elem
　} else if (elem.removeEventListener) {
　elem.removeEventListener(eventName, handler, false);
　}
}

Es ist wichtig zu beachten, dass diese Funktion in der Event-Handler-Funktion unter Firefox auf das überwachte Element selbst verweist, dies ist jedoch unter IE nicht der Fall. Sie können den Callback-Funktionsaufruf verwenden, um den aktuellen Kontext auf das überwachte Element zu verweisen Element.

5. Mausposition

[Analyseerklärung] Unter IE hat das gerade Objekt x-, y-Attribute, aber keine pageX-, pageY-Attribute; unter Firefox hat das gerade Objekt pageX-, pageY-Attribute, aber keine x-, y-Attribute.

【Kompatibilitätsverarbeitung】Verwenden Sie mX (mX = event.x ? event.x : event.pageX;), um event.x unter IE oder event.pageX unter Firefox zu ersetzen. Komplizierter ist es, die absolute Position zu berücksichtigen.

Code kopieren Der Code lautet wie folgt:

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);
}