HTML でのイベントの使用方法

イベントは顧客の操作やブラウザの機能によってトリガーされることが多く、JS を使用していつでも特定のイベントをトリガーすることもできます。今回は、HTML でよく使われるイベントのアイデアについてお話します

DOM でのイベント シミュレーション

ドキュメント オブジェクトの creatEvent() メソッドを使用して、イベント オブジェクトを作成します。パラメーターは、作成されるイベント タイプの string です。

DOM2: 文字列は英語の複数形を使用します DOM3: 単数形 UIEvents: UI イベント (マウス イベントとキーボード イベントはどちらも UI イベントから継承されます) MouseEvents: マウス イベント MutationEvents: DOM 変更イベント HTMLEvents: HTML イベントはイベント関連情報のペアを使用します その初期化イベントをトリガーします。 dispatchEvent() メソッドを使用します。パラメーターは、イベントをトリガーしたイベント オブジェクトです。イベントをサポートするすべての DOM ノード は、このメソッドをサポートします

マウス イベントをシミュレートします

オブジェクトの作成後に返されるオブジェクト には、マウス イベントに関連する情報を指定するために使用される initMouseEvent() メソッドがあります。このメソッドは、マウス イベントの一般的な各属性に対応する 15 個のパラメーターを受け取ります。

var event=document.createEvent("MouseEvents");
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
btn.dispatchEvent(event);

キーボードイベントをシミュレートする

オブジェクトの作成後に返されるオブジェクトには initKeyEvent() メソッドがあります。 DOM3 では、createEvent("keyboardEvent") を呼び出すことでキーボード イベントを作成できると規定しています。 Firefox では、createEvent("keyEvents") を呼び出します。他のブラウザでは、一般的なイベントを作成してから、キーボード イベント固有の情報をイベント オブジェクトに追加する必要があります。

var event=document.createEvent("Events");
event.initEvent(type,bubbles,cancelable);
event.view=document.defaultView;
...
textbox.dispatchEvent(event);

カスタム DOM イベント

カスタム イベントは DOM によってネイティブにトリガーされません。その目的は、開発者が独自のイベントを作成できるようにすることです。 新しいカスタム イベントを作成するには、createEvent("CustomEvent") を呼び出します。返されたオブジェクトには initCustomEvent() メソッドがあります。

ie での時間シミュレーション

アイデア: 最初にイベント オブジェクトを作成し、次に対応する情報をポイントして、作成をトリガーします: document.createEventObject()。これはパラメーターを受け取りません。結果は一般的なイベント オブジェクトを返します。 。 すべての情報を手動で追加します。 ターゲット上で fireEvent() メソッドを呼び出します。パラメータ:

イベント処理

プログラム名とイベントオブジェクト、srcElementとtype属性がイベントオブジェクトに自動的に追加されますこれらの事例を読んだ後は、メソッドを習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

関連書籍:

HTML5 タグのネスト ルールの詳細な紹介

HTML の FormData オブジェクトの詳細な紹介

H5 の postMessage API の詳細な図による説明 詳細な紹介

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