HTML DOM addEventListener（）メソッド

HTML DOMのaddEventListener（）メソッドは、指定された要素にイベントハンドラーをアタッチするために使用されます。

以下は構文です-

element.addEventListener(event, function, capture)

上記のパラメータには、-

が含まれます。

イベント： イベントの名前。必須です。
機能： イベント発生時に実行する関数。必須です。
キャプチャ： イベントをキャプチャフェーズで実行する必要があるかどうか。このチェックとブール値の表示。正誤問題。

ここで、DOM addEventListener（）メソッドを実装する例を見てみましょう-

例

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</button>
<p id="myid"></p>
<script>
   var x = document.getElementById("btn");
   x.addEventListener("mouseover", one);
   x.addEventListener("click", two);
   function one() {
      document.getElementById("myid").innerHTML += "Button hovered! "
   }
   function two() {
      document.getElementById("myid").innerHTML += "!!Button Clicked!! "
   }
</script>
</body>
</html>

出力

HTML DOM addEventListener（）メソッド

ここで、クリックすると、「ボタンがクリックされました」というメッセージが表示されます。マウスでボタンをホバーすると、次のテキストが表示されます。「ボタンをホバーしました」-

HTML DOM addEventListener（）メソッド

HTMLDOMオブジェクト名プロパティ

HTML<form>オートコンプリート属性

HTMLDOMストレージイベント
HTML DOMストレージイベントは、ウィンドウのストレージ領域に変更があったときにトリガーされます。ストレージイベントは、他のウィンドウがウィンドウのストレージ領域を変更した場合にのみトリガーされます。このイベントはバブルせず、キャンセルすることもできます。構文以下は、-の構文です。 window.addEventListener("storage", SCRIPT); 例ストレージイベントの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Storage Event Exa
HTML DOM stopPropagation（）イベントメソッド
HTML DOM stopPropagation（）イベントメソッドは、指定された要素の伝播を停止するために使用されます。つまり、stopPropagtion（）メソッドを使用して、親要素をクリックしても子に伝播せず、子要素をクリックしても親に伝播しません。イベントの伝播は、イベントバブリングとも呼ばれます。構文以下は、stopPropagation（）イベントメソッドの構文です- event.stopPropagation() 例 stopPropagation（）イベントメソッドの例を見てみましょう- <!DOCTYPE html> <html> <h