Eine ausführliche Einführung in neue Ereignisse in HTML5

HTML5 hat viele neue Ereignisse hinzugefügt, aber da ihre Kompatibilitätsprobleme nicht ideal sind und ihre praktische Anwendung nicht sehr stark ist, werden sie hier grundsätzlich weggelassen. Wir teilen nur Ereignisse, mit denen weitgehend kompatibel ist Gute Sharing-Anwendungen werden in Zukunft hinzugefügt, wenn sich die Kompatibilität verbessert.

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. Spezifische Anweisungen unten:

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()“ zum Abbrechen der mit dem Ereignis verknüpften Standardaktion verwendet werden kann), 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: Ein Array 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.

identifier: 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: das auffällige DOM-Knoten-Ziel.

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

Bezeichner: ein numerischer Wert, der den aktuellen Finger in der Berührungssitzung (Berührungs-Sitzung) 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 die Funktion nicht. Feedback ist willkommen.

JavaScriptKleines Operationsbeispiel:

1. 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 das 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 Die Funktion der Klasse besteht darin, dass sie erst ausgelöst wird, nachdem alle Ressourcen vollständig geladen sind, was manchmal zu schwerwiegenden Verzögerungen führt. Der Entwickler hat dann ein benutzerdefiniertes Ereignis, domready, erstellt, das nach dem Laden des DOM ausgelöst wird bevor die Ressource geladen wird.

domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;

  document.addeventListener('DOMContentLoaded',function(){...},false);

 

 

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in neue Ereignisse in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!