HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説

HTML DOMのcreateEvent()メソッドは、イベントオブジェクトを生成するためのメソッドです。生成するイベントの種類は引数で指定します。なお、createEvent()で作成したイベントは、使用する前に必ず初期化する必要があります。また、作成したイベントをHTML要素へ通知（ディスパッチ）するには、対象のノードに対してdispatchEvent()メソッドを呼び出します。

構文

HTML DOM createEvent()メソッドの基本構文は以下のとおりです。

document.createEvent( eventType )

eventTypeは文字列型の必須パラメータで、生成したいイベントの種類を指定します。指定できる主なイベントタイプには、AnimationEvent、ClipboardEvent、DragEvent、FocusEvent、HashChangeEvent、InputEvent、KeyboardEvent、MouseEvent、PageTransitionEvent、PopStateEvent、ProgressEvent、StorageEvent、TouchEvent、TransitionEvent、UiEvent、WheelEventなどがあります。

サンプルコード

それでは、createEvent()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<style>
    p{
        border:solid 1px blue;
        background-color:lightgreen;
    }
</style>
<h2>createEvent() example</h2>
<script>
    var i=0;
    function eventAdd() {
        var x = document.createEvent("MouseEvent");
        x.initMouseEvent("mouseout", true, true);
        document.getElementById("PAR1").dispatchEvent(x);
    }
    function addText(){
        var txt=document.getElementById("PAR1");
        txt.innerHTML+=" TEXT"+i;
        i++;
    }
</script>
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>
<button onclick="eventAdd()">Simulate Mouse Out</button>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説

「Simulate Mouse Out」ボタンをクリックするか、実際にマウスカーソルを段落の内側から外側へ移動させて<p>要素からマウスアウトしてみましょう。何度か操作すると、以下のように表示が変化します。

HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説

コードの解説

この例では、まず枠線と背景色を適用した段落を作成し、マウスカーソルがその要素から外れたときにaddText()メソッドが実行されるように設定しています。

p{
    border:solid 1px blue;
    background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>

続いて、「Simulate Mouse Out」というボタンを用意し、ユーザーがクリックした際にeventAdd()メソッドが呼び出されるようにしています。

<button onclick="eventAdd()">Simulate Mouse Out</button>

addText()メソッドでは、documentオブジェクトのgetElementById()メソッドを使って段落要素を取得し、innerHTMLプロパティによって「TEXT」＋変数iの値をテキストの末尾に追加していきます。

function addText(){
    var txt=document.getElementById("PAR1");
    txt.innerHTML+=" TEXT"+i;
    i++;
}

eventAdd()メソッドでは、documentオブジェクトのcreateEvent()メソッドを使って「MouseEvent」タイプのイベントを生成しています。その後、initMouseEvent()メソッドで、イベント名＝"mouseout"、バブリングあり（true）、キャンセル可能（true）というパラメータを指定してマウスイベントを初期化します。

最後に、dispatchEvent()メソッドを使って、作成したMouseEventを<p>要素へディスパッチします。これにより、<p>要素はイベントリスナーとして動作し、実際にマウスアウトが起きた場合と同じようにmouseoutイベントが処理されます。

function eventAdd() {
    var x = document.createEvent("MouseEvent");
    x.initMouseEvent("mouseout", true, true);
    document.getElementById("PAR1").dispatchEvent(x);
}

補足：モダンな書き方について

なお、initMouseEvent()などのinit系メソッドは現在非推奨（Deprecated）とされています。最新のブラウザ環境では、new MouseEvent("mouseout")のようなイベントコンストラクタや、new CustomEvent()を使ってイベントを直接生成する方法が推奨されています。ただし、レガシーコードの理解や既存システムの保守においては、createEvent()の仕組みを把握しておくことが重要です。

  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや