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座標。

identifier: タッチを識別する一意の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操作の簡単な例:

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

DOMContentLoadedイベントについて

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

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

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

 

 

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