エントリー
こんにちは、Habracheloveki。
この記事では、DOMイベントなどの便利な機能についてコミュニティに伝えたいと思います。 Javascriptに何らかの形で関係している人は誰でも、この言語ではイベントとその処理が最も重要で頻繁に使用されるプロパティの1つであることを知っていますが、これらのイベントをプログラムで生成する方法を知っている人は多くありません。 実際、この記事はこれに専念しています：それはそれが何であるか、なぜそれが必要であるか、そしてそれをどのように使うかを伝えます。 このトピックは議論中の主題と非常に密接に関連していますが、リスナーの話はありません。
これは何ですか
DOMイベントを使用すると、JavaScript、JScript、ECMAScript、VBScript、Javaなどのイベント指向プログラミング言語で、DOMツリー（HTML、XHTML、XUL、SVG）内の要素ノードにさまざまなイベントハンドラー/イベントリスナーを登録できます。 。
これは、たとえば、onClick、onBlur、onMouseOverなどです。 これらのイベントは、特定のユーザーアクション（キーストローク、クリック、要素の境界を越えたカーソル移動）によってトリガーされます。 つまり、「統治体」に物理的な影響を与えます。 入力および操作デバイスを使用せずに、このようなイベントをプログラムで起動する方法を学習します。
なぜこれが必要なのですか？
アプリケーションは非常に異なる
方法で見つけることができ
ます ：
bbmmorpgのボットの開発、自動化スクリプト、不正行為（「キーボード」のスクリプト：入力行に目的の文字を挿入してonKeyUpイベントをトリガーする）、「web dvdnolnosti」テスト。 一般的に、どれだけの想像力で十分です。
インターネットでこのトピックに関する賢明なマニュアルを見つけることができなかったため、ハブでの調査結果を減らして永続化することにしました。
ただし、次のことを覚えておく価値があります。イベントの「手動」トリガー（生成）は、このイベントに関連付けられたデフォルトのアクションを作成
しません 。 たとえば、プログラムで要素にフォーカスイベントを生成しても、フォーカスを受け取ることはあり
ません。手動で生成した送信イベントはフォームにデータを送信さ
せません （フォームの送信メソッドを使用します）。生成されたkeypressイベント
は 、入力フィールドにシンボルが表示されることを意味し
ません。このような制限は、セキュリティ上の目的や、スクリプトがユーザーの作業やブラウザとのやり取りをシミュレートするのを防ぐために必要です。
使い方は？
一般的な順序では、アルゴリズムは単一です。
-イベントがハングするDOMノードのオブジェクトを取得します。
-必要なイベントモジュールのオブジェクトを作成します。
-イベントオブジェクトを初期化します。
-必要なDOMノードにイベントを割り当てます。
開始するには、既存のモジュールに慣れてください。
-イベント-親モジュール。 すべてのモジュールはそれを継承します。これについては以下で説明します。
-HTMLEvents-DOM要素のイベントが含まれます。
-UIEvents-キーボードイベント。
-MouseEvents-マウスイベント。
-MutationEvents-DOMツリー変更イベント。
DOM 2イベントの構造
5つのDOM 2イベントモジュールがあります。 それらの名前は、イベントの本質を反映しています。
イベントHTMLEvents- 中止する
- ぼかす
- 変わる
- エラー
- フォーカス
- ロード
- リセットする
- サイズ変更
- スクロール
- 選択する
- 提出する
- 降ろす
UIEvents- DOMActivate
- DOMFocusIn
- DOMFocusOut
- キーダウン
- キープレス
- キーアップ
- MouseEventsを間接的にカバーします
Mousevents- クリック
- マウスダウン
- マウスムーブ
- マウスアウト
- マウスオーバー
- マウスアップ
ミューテーションベント- DOMAttrModified
- DOMNodeInserted
- DOMNodeRemoved
- DOMCharacterDataModified
- DOMNodeInsertedIntoDocument
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
他のイベント（「dblClick」など）は仕様の一部ではなく、ブラウザーはサポートを必要としません。 それらをサポートするブラウザーは、適切なモジュールを選択するか（たとえば、 'dblClick'はMouseEventsモジュールに非常に適しています）、または新しいモジュールを作成します。 ブラウザがそのようなイベントを検出するモジュールを知る必要があります。
サンプルイベントの実装-onClick
偽のイベントは、必要なイベントを含む対応するイベントモジュールの名前を受け入れるdocument.createEventメソッドを使用して作成されます。 次に、initEventメソッドを使用してイベントを準備し（メソッドの名前はモジュールごとに異なります）、最後に、dispatchEventメソッドを使用して指定した要素でイベントをトリガーします。 一般的なイベントではなく、より具体的なタイプのイベントを使用する場合、イベントを準備するときにイベントに関する追加情報を提供できます。 やや厄介ですが、この例ではすべてを明確にします。
IDが「element_id」に等しい要素で「クリック」イベントを作成するには、以下を行う必要があります。
var element = document.getElementById('element_id');
イベントとその説明を初期化するためのメソッドのパラメーターのリストが大きすぎるため、トピックが煩雑になるのを避けるために、リンクをクリックして、クリックして詳細に慣れることができます。
タイツ 。 また、イベントを初期化するメソッドの名前の下には、パラメーターの説明を含むページへのリンクとして設計されています。
すべてのモジュールのイベント初期化の例：
HTMLEventsおよび汎用イベントinitEvent （「タイプ」、バブル、キャンセル可能）
UIEventsinitUIEvent （「タイプ」、バブル、キャンセル可能、windowObject、詳細）
MouseventsinitMouseEvent （「タイプ」、バブル、キャンセル可能、windowObject、詳細、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、metaKey、ボタン、relatedTarget）
ミューテーションベントinitMutationEvent （「タイプ」、バブル、キャンセル可能、relatedNode、prevValue、newValue、attrName、attrChange）
prevValue、NewValue、およびattrNameはnullにできますが、イベントがDOMAttrModified（値1、2、または3）でなくても、attrChangeを常に定義する必要があることに注意してください。
MouseEventsはUIEventsのサブクラスですが、後者はEventsモジュールのサブクラスです。したがって、MouseEventsオブジェクトを作成すると、UIEventsおよびEventsインターフェースのinitUIEventおよびinitEventメソッドも継承します。 そのため、準備時に使用するイベント初期化メソッドを選択できます（Nit * Event）
汎用イベントモジュールを使用したイベントのトリガー（継承のデモ）
以下の例は、ジェネリックinitEventメソッドを使用するイベントのトリガーを示し、プロパティはデフォルト値で未定義のままになります（ただし、ジェネリックinitEventまたはinitUIEventを使用する場合でも、ジェネリックモジュールの名前ではなく、正確なモジュール名を使用する必要があります。 Mozilla / Firefox、Konqueror、Safariでは動作しません）：
var element = document.getElementById('element_id'); var o = document.createEvent('MouseEvents'); o.initEvent('click', true, true);
キーボードイベント
Mozilla / Firefoxは標準を正しく実装せず、一般的な（一般的な）UIEventsを使用してキーイベントを作成できないため、キーボードイベントはもう少し複雑です（重大なエラーでフリーズまたはクラッシュする可能性があります）。 代わりに、内部KeyEventsモジュールとinitKeyEvent初期化メソッドを提供します。 initKeyEventメソッドは、「type」、bubbles、cancellable、windowObject、ctrlKey、altKey、shiftKey、metaKey、keyCode、charCodeのパラメーターを受け入れます。 ifコンストラクト（window.KeyEvent）を使用して、ブラウザーのKeyEventsモジュールのサポートを検出できます。 UIEventsを使用するブラウザーには、キーイベント用の特定の初期化関数がないため、いくつかのプロパティを手動で追加する必要があります。
var element = document.getElementById('element_id'); if( window.KeyEvent )
Internet Explorerのイベント
Internet Explorerでのイベントの初期化は、他のブラウザーとは大きく異なります。 IEにはfireEventというイベントを手動でトリガーするメソッドがあり、IE 5.5 +で使用できます。 最も単純な形式では、これはDOMバージョンに似ていますが、バブルとキャンセル可能なプロパティは使用できません。 fireEventメソッドは、1つまたは2つのパラメーターが渡されることを想定しています。 最初はイベントの名前（たとえば、「OnChange」）で、オプションの2番目のパラメーターはハンドラーに渡されるイベントオブジェクトでなければなりません。
ウィンドウオブジェクトはIEでいくつかのイベントを検出できますが（たとえば、ロード、アンロード、スクロール、サイズ変更-これらはすべて、仕様ではウィンドウではなくドキュメントオブジェクトで検出する必要があります）、これはfireEventをウィンドウオブジェクトで使用できることを意味しません。
var element = document.getElementById('element_id'); if(document.createEvent)
イベントに関する追加情報を提供する場合は、createEventObjectメソッドを使用して、CreateEventおよびinit * Event DOMメソッドを複製する必要があります。 createEventObjectメソッドは通常、空のイベントオブジェクトを返すため、パラメータを自分で決定する必要があります。
var element = document.getElementById('element_id'); if(document.createEvent)
おわりに
私はこのトピックを非常に簡潔に説明しましたが、その本質を理解するにはこれで十分です。 イベント生成を使用すると、画面の背後で多くの興味深いことを行うことができ、使用可能なイベントの数を考えると、このトピックはさらに興味深いものになります。
この記事では、いくつかの例とイベントのタイプのみを提供していますが、冒頭のリストから他のものを説明することは難しくありません。 数が多いため、すべてを伝えることはできませんが、名前はそれ自体を物語っています。そのため、inquisitive％username％は、目的のイベントの説明、実行するパラメーターのリスト、および実行したアクションを簡単にGoogleで検索します。
ランダムに生成せずに成功したライフイベント:)
何を読む？
このトピックの基礎となった記事イベントモジュールの構造の説明：テーブル、比較。Mozilla MDNイベントについて