ホームページ > 記事 > ウェブフロントエンド > HTML でのイベントの使用方法

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

php中世界最好的语言オリジナル: 2017-12-04 09:13:282347ブラウズ

イベントは顧客の操作やブラウザの機能によってトリガーされることが多く、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中国語ウェブサイトで！