HTML5 の新しいイベントの詳細

HTML5 では多くの新しいイベントが追加されていますが、互換性の問題があまり理想的ではなく、実用性があまり高くないため、ここでは基本的に省略して、優れたアプリケーションと広く互換性のあるイベントのみを紹介します。今後、互換性の状況が改善され次第、シェアは順次追加される予定です。

touchstart、touchmove、touchend イベント

最初のタッチイベント touchstart、touchmove、touchend は、開発者に情報を伝えるために iOS の Safari ブラウザに新しく追加されたイベントです。 iOS デバイスにはマウスもキーボードもないため、モバイル Safari ブラウザ用のインタラクティブな Web ページを開発する場合、PC 側のマウスとキーボードのイベントだけでは十分ではありません。

iPhone 3G がリリースされたとき、独自のモバイル Safari ブラウザはタッチ操作に関連するいくつかの新しいイベントを提供しました。その後、Android 上のブラウザーにも同じイベントが実装されました。タッチ イベント (タッチ) は、ユーザーが画面上に指を置く、画面上をスライドする、または画面から離れると発生します。具体的な手順は以下のとおりです:

Touchstart イベント: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。

touchmove イベント: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。

touchend イベント: 指が画面から離れるとトリガーされます。

touchcancel イベント: システムがタッチの追跡を停止するとトリガーされます。このイベントの正確な出発時間については、文書に具体的な説明がないため、推測するしかありません。

上記のイベントはすべてバブルアップするため、キャンセルすることができます。これらのタッチ イベントは DOM 仕様では定義されていませんが、DOM 互換の方法で実装されています。したがって、各タッチ イベントのイベント オブジェクトは、マウスの実践において共通の属性を提供します。バブル (バブル イベントのタイプ)、キャンセル可能 (イベントに関連付けられたデフォルト アクションをキャンセルするために、preventDefault() メソッドを使用できるかどうか)、clientX (戻り値イベントがトリガーされたとき、マウス ポインターの水平座標)、clientY (イベントがトリガーされたときのマウス ポインターの垂直座標を返す)、screenX (イベントがトリガーされたとき、マウス ポインターの水平座標)、および screenY (イベントがトリガーされたときに返されます) イベントがトリガーされたときのマウス ポインターの垂直座標)。共通の DOM プロパティに加えて、タッチ イベントには、タッチを追跡するための次の 3 つのプロパティも含まれています。

Touches: 現在追跡されているタッチ操作を表すタッチ オブジェクトの配列。

targetTouches: イベントターゲットに固有の Touch オブジェクトの配列。

changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

各 Touch オブジェクトには次のプロパティが含まれます。

clientX: ビューポート内のタッチターゲットのx座標。

clientY: ビューポート内のタッチターゲットのy座標。

識別子：タッチを識別する一意のID。

pageX: ページ上のタッチ対象のx座標。

pageY: ページ上のタッチ対象のy座標。

screenX: 画面上のタッチ対象のx座標。

screenY: 画面上のタッチ対象のy座標。

ターゲット: 目を引くDOMノードターゲット。

各タッチ ポイントには、次のタッチ情報 (一般的に使用される) が含まれます:

識別子: タッチ セッションで現在の指を一意に識別する数値。一般的には0から始まるシリアル番号（android4.1、uc）

target: アクションのターゲットとなるDOM要素。

pageX/pageX/clientX/clientY/screenX/screenY: 値、アクションが発生する画面上の位置 (ページにはスクロール距離が含まれますが、クライアントにはスクロール距離は含まれません。画面は画面に基づきます)。

radiusX/radiusY/rotationAngle: 楕円の 2 つの半径と回転角度をそれぞれ使用して、指の形状とほぼ同等の楕円を描画します。幸いなことに、この機能は一般的には使用されていません。

JavaScript 操作の簡単な例:

JavaScript コードコンテンツをクリップボードにコピー

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

DOMContentLoaded イベントについて

このイベントは、ページの読み込みが完了したときに HTML の onLoad から拡張されたものです。スクリプトでは、load イベントを使用しますが、このクラス関数の欠点は、すべてのリソースが完全にロードされた後でのみトリガーされるため、場合によっては重大な遅延が発生することです。その後、開発者はカスタム イベント domready を作成し、DOM の後にトリガーされます。がロードされ、リソースがロードされる前。

domready イベントは多くの JavaScript ライブラリですぐに採用され、DOMContentLoaded の形式でネイティブ ブラウザーで使用され始め、現在 HTML5 で標準化されています。次のコードは、ドキュメント内で DOMContentLoaded がどのように使用されるかを示しています。 object Triggered;
document.addeventListener('DOMContentLoaded',function(){...},false);

以上がHTML5 の新しいイベントの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。