Ein detaillierter Blick auf neue Ereignisse in HTML5

Viele neue Ereignisse wurden in HTML5 hinzugefügt, aber da ihre Kompatibilitätsprobleme nicht sehr gut sind und ihre praktische Anwendung nicht sehr stark ist, werden sie hier grundsätzlich weggelassen. Wir teilen nur Ereignisse, die weitgehend mit guten Anwendungen kompatibel sind Wenn sich die Kompatibilitätssituation verbessert, werden in Zukunft weitere Freigaben hinzugefügt.

Touchstart-, Touchmove- und Touchend-Ereignisse

Die anfänglichen Touch-Ereignisse Touchstart, Touchmove und Touchend sind neu hinzugefügte Ereignisse in der iOS-Version des Safari-Browsers, um Entwicklern einige Informationen zu übermitteln . . Da iOS-Geräte weder über eine Maus noch über eine Tastatur verfügen, reichen PC-seitige Maus- und Tastaturereignisse bei der Entwicklung interaktiver Webseiten für den mobilen Safari-Browser nicht aus.

Als das iPhone 3Gs auf den Markt kam, stellte sein eigener mobiler Safari-Browser einige neue Ereignisse im Zusammenhang mit Touch-Bedienungen bereit. Anschließend implementierten auch Browser auf Android das gleiche Ereignis. Berührungsereignisse (Berührung) treten auf, wenn der Benutzer seinen Finger auf den Bildschirm legt, über den Bildschirm gleitet oder sich vom Bildschirm entfernt. Die folgenden Details:

Touchstart-Ereignis: Wird ausgelöst, wenn ein Finger den Bildschirm berührt, auch wenn sich bereits ein Finger auf dem Bildschirm befindet.

Touchmove-Ereignis: Wird kontinuierlich ausgelöst, wenn der Finger über den Bildschirm gleitet. Während dieses Ereignisses kann der Aufruf des Ereignisses „preventDefault()“ das Scrollen verhindern.

Touchend-Ereignis: wird ausgelöst, wenn der Finger den Bildschirm verlässt.

Touchcancel-Ereignis: wird ausgelöst, wenn das System die Verfolgung von Berührungen stoppt. Bezüglich der genauen Abfahrtszeit dieser Veranstaltung gibt es im Dokument keine konkrete Erklärung, sodass wir nur Vermutungen anstellen können.

Die oben genannten Veranstaltungen werden sprudeln und können abgesagt werden. Obwohl diese Berührungsereignisse nicht in der DOM-Spezifikation definiert sind, werden sie auf DOM-kompatible Weise implementiert. Daher stellt das Ereignisobjekt jedes Berührungsereignisses allgemeine Attribute in der Mauspraxis bereit: Blasen (Typ des Blasenereignisses), abbrechbar (ob die Methode „preventDefault()“ verwendet werden kann, um die mit dem Ereignis verknüpfte Standardaktion abzubrechen), clientX (Rückgabe von „When“) wenn das Ereignis ausgelöst wird, die horizontale Koordinate des Mauszeigers), clientY (gibt die vertikale Koordinate des Mauszeigers zurück, wenn das Ereignis ausgelöst wird), screenX (wenn ein Ereignis ausgelöst wird, die horizontale Koordinate des Mauszeigers) und screenY ( wird zurückgegeben, wenn ein Ereignis ausgelöst wird) Die vertikale Koordinate des Mauszeigers, wenn ein Ereignis ausgelöst wird. Zusätzlich zu den allgemeinen DOM-Eigenschaften enthalten Berührungsereignisse auch die folgenden drei Eigenschaften zum Verfolgen von Berührungen.

Berührungen: Eine Reihe von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.

TargetTouches: Ein Array von Touch-Objekten, die für das Ereignisziel spezifisch sind.

changeTouches: Ein Array von Touch-Objekten, das angibt, was sich seit der letzten Berührung geändert hat.

Jedes Touch-Objekt enthält die folgenden Eigenschaften.

ClientX: Die x-Koordinate des Touch-Ziels im Ansichtsfenster.

ClientY: Die Y-Koordinate des Berührungsziels im Ansichtsfenster.

Identifikator: Die eindeutige ID, die die Berührung identifiziert.

pageX: Die x-Koordinate des Berührungsziels auf der Seite.

pageY: Die Y-Koordinate des Berührungsziels auf der Seite.

screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.

ScreenY: Die Y-Koordinate des Berührungsziels auf dem Bildschirm.

Ziel: DOM-Knotenziel.

Jeder Berührungspunkt enthält die folgenden Berührungsinformationen (häufig verwendet):

Bezeichner: ein numerischer Wert, der den aktuellen Finger in der Berührungssitzung eindeutig identifiziert. Im Allgemeinen eine Seriennummer beginnend bei 0 (android4.1, uc)

target: DOM-Element, das das Ziel der Aktion ist.

Seite den Bildschirm).

radiusX/radiusY/rotationAngle: Zeichnen Sie eine Ellipse, die ungefähr der Form eines Fingers entspricht, mit den beiden Radien bzw. Drehwinkeln der Ellipse. Der vorläufige Testbrowser unterstützt es nicht, die Funktion wird jedoch nicht häufig verwendet.

Kleines Beispiel einer JavaScript-Operation:

JavaScript-CodeInhalt in die Zwischenablage kopieren

var obj = document.getElementByIdx_x('id');   
obj.addEventListener('touchmove', function(event) {   
     // 如果这个元素的位置内只有一个手指的话   
    if (event.targetTouches.length == 1) {   
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要    
        var touch = event.targetTouches[0];   
        // 把元素放在手指所在的位置   
        obj.style.left = touch.pageX-50 + 'px';   
        obj.style.top = touch.pageY-50 + 'px';   
        }   
}, false);

Über DOMContentLoaded Ereignis

Dieses Ereignis ist eine Erweiterung von onLoad in HTML. Wenn eine Seite vollständig geladen ist, besteht die Möglichkeit, das Skript zu initialisieren, darin, das Ladeereignis zu verwenden. Der Nachteil dieser Klassenfunktion besteht jedoch darin, dass sie nur die Ressourcen werden erst ausgelöst, wenn sie vollständig geladen sind, was manchmal zu erheblichen Verzögerungen führt. Der Entwickler hat dann ein benutzerdefiniertes Ereignis namens domready erstellt, das nach dem Laden des DOM und vor dem Laden der Ressourcen ausgelöst wird.

Das domready-Ereignis wurde schnell von vielen JavaScript-Bibliotheken übernommen und in Form von DOMContentLoaded verwendet. Darüber hinaus wurde es jetzt in HTML5 standardisiert. Der folgende Code zeigt, wie DOMContentLoaded ist Wird in Triggered im Dokumentobjekt verwendet;
document.addeventListener('DOMContentLoaded',function(){...},false);

Das obige ist der detaillierte Inhalt vonEin detaillierter Blick auf neue Ereignisse in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!