HTML DOM createEvent（）メソッド
HTML DOM createEvent（）メソッドは、パラメーターでタイプが指定されるイベントオブジェクトを作成するために使用されます。作成されたイベントは、使用する前に初期化する必要があります。イベントをHTML要素にディスパッチするには、その指定されたノードでdispatchEvent（）メソッドを使用する必要があります。
構文
以下は、HTML DOM createEvent（）メソッドの構文です-
document.createEvent( eventType )
ここで、typestringtypeの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>
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「SimulateMouseOut」をクリックするか、現在の段落からマウスを外すと、つまり、マウスを
要素の内側から外側に数回移動します-
上記の例では-
いくつかのスタイルが適用された段落を作成し、マウスがその要素から出ると、addText（）メソッドを実行します。
p{
border:solid 1px blue;
background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p> 次に、ユーザーがクリックするとeventAdd（）メソッドを実行する「Simulatemouseout」ボタンを作成しました。
<button onclick="eventAdd()">Simulate Mouse Out</button>
addText（）メソッドは、ドキュメントオブジェクトのgetElementById（）メソッドを使用して段落要素を取得します。次に、innerHTMLプロパティ-
を使用して、「Text」+変数iを追加します。function addText(){
var txt=document.getElementById("PAR1");
txt.innerHTML+=" TEXT"+i;
i++;
} eventAdd（）メソッドは、ドキュメントオブジェクトのcreateEvent（）メソッドを使用して、「MouseEvent」タイプのイベントを作成します。次に、パラメータ、event name =” mouseout” bubbling=trueおよびcancellable=trueを使用してマウスイベントを初期化します。
次に、段落ノードのdispatchEvent（）メソッドを使用して、作成した「MouseEvent」を
要素にディスパッチします。
要素がイベントリスナーとして機能するようになります-
function eventAdd() {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseout", true, true);
document.getElementById("PAR1").dispatchEvent(x);
} -
HTML DOM hasAttributes（）メソッド
HTML DOM hasAttributes（）メソッドは、要素に属性があるかどうかをチェックします。要素に属性が含まれている場合はtrueを返し、含まない場合はfalseを返します。このメソッドが要素ノード以外のノードで呼び出された場合、戻り値は常にfalseになります。 構文 以下は、hasAttribbutes（）メソッドの構文です- node.hasAttributes() 例 hasAttributes（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>hasAttributes(
-
HTML DOM focus（）メソッド
HTML DOM focus（）メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例：タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur（）メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> input[type=text]:focus, p: