JavaScript HTML DOMイベントリスナー

addEventListener()メソッド

例

ユーザーがボタンをクリックしたときに起動するイベントリスナーを追加します。

document.getElementById("myBtn").addEventListener("click", displayDate);

自分で試してみる»

addEventListener()メソッドは、指定された要素にイベントハンドラーをアタッチします。 addEventListener()メソッドは、既存のイベントハンドラーを上書きせずに、イベントハンドラーを要素にアタッチします。

1つの要素に多数のイベントハンドラーを追加できます。

同じタイプのイベントハンドラーを1つの要素に追加できます。つまり、2つの「クリック」イベントを追加できます。

イベントリスナーは、HTML要素だけでなく、任意のDOMオブジェクトに追加できます。つまり、ウィンドウオブジェクトです。

addEventListener()メソッドを使用すると、イベントがバブリングにどのように反応するかを制御しやすくなります。 addEventListener()メソッドを使用すると、JavaScriptがHTMLマークアップから分離されるため、読みやすくなり、HTMLマークアップを制御しない場合でもイベントリスナーを追加できるようになります。

イベントリスナーは、removeEventListener()メソッドを使用して簡単に削除できます。

構文

<div> element.addEventListener(event, function, useCapture);</div>

最初のパラメータはイベントのタイプです(「click" また "mousedown」またはその他のHTMLDOMイベント.)

2番目のパラメーターは、イベントが発生したときに呼び出す関数です。

3番目のパラメーターは、イベントバブリングとイベントキャプチャのどちらを使用するか指定するブール値です。このパラメーターはオプションです。

イベントには「on」プレフィックスを使用しないことに注意してください。"onclick"の代わりに"click"を使用してください。

要素にイベントハンドラーを追加する

例

アラート「Hello World!」ユーザーが要素をクリックしたとき:

element.addEventListener("click", function(){ alert("Hello World!"); });

自分で試してみる»

外部の「名前付き」関数を参照することもできます。

例

アラート「Hello World!」ユーザーが要素をクリックしたとき:

element.addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); }

自分で試してみる»

同じ要素に多数のイベントハンドラーを追加する

addEventListener()メソッドを使用すると、既存のイベントを上書きせずに、同じ要素に多くのイベントを追加できます。

例

element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction);

自分で試してみる»

異なるタイプのイベントを同じ要素に追加できます。

例

element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseout", myThirdFunction);

自分で試してみる»

イベントハンドラーをウィンドウオブジェクトに追加する

addEventListener()メソッドを使用すると、HTML要素、HTMLドキュメント、ウィンドウオブジェクト、またはxmlHttpRequestオブジェクトなどのイベントをサポートするその他のオブジェクトなどのHTML DOMオブジェクトにイベントリスナーを追加できます。

例

ユーザーがウィンドウのサイズを変更したときに起動するイベントリスナーを追加します。

window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; });

自分で試してみる»

パラメータの受け渡し

パラメーター値を渡すときは、パラメーターを使用して指定された関数を呼び出す「無名関数」を使用します。

例

element.addEventListener("click", function(){ myFunction(p1, p2); });

自分で試してみる»

イベントバブリングまたはイベントキャプチャ?

HTML DOMでイベントを伝播するには、バブリングとキャプチャの2つの方法があります。

イベントの伝播は、イベントが発生したときに要素の順序を定義する方法です。<div> 要素内に 要素があり、ユーザーが要素をクリックした場合、どの要素の「クリック」イベントを最初に処理する必要がありますか?

バブリングでは、最も内側の要素のイベントが最初に処理され、次に外側のイベントが処理されます。要素のクリックイベントが最初に処理され、次に<div>要素のクリックイベントが処理されます。

キャプチャでは、最も外側の要素のイベントが最初に処理され、次に内側のイベントが処理されます。<div>要素のクリックイベントが最初に処理され、次に要素のクリックイベントが処理されます。

addEventListener()メソッドでは、「useCapture」パラメーターを使用して伝播タイプを指定できます。

<div>addEventListener(event, function, useCapture);</div>

デフォルト値はfalseで、バブリング伝播を使用します。値が trueに設定されている場合、イベントはキャプチャ伝播を使用します。

例

document.getElementById("myP").addEventListener("click", myFunction, true); document.getElementById("myDiv").addEventListener("click", myFunction, true);

自分で試してみる»

removeEventListener()メソッド

このremoveEventListener()メソッドは、addEventListener()メソッドでアタッチされたイベントハンドラーを削除します。

例

element.removeEventListener("mousemove", myFunction);

自分で試してみる»

HTML DOMイベントオブジェクトリファレンス

すべてのHTML DOMイベントのリストについては、完全なHTML DOMイベントオブジェクトリファレンス.

おすすめのプログラミングスクールを確認する！

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング

JavaScript HTML DOMイベントリスナー

addEventListener()メソッド

例

構文

要素にイベントハンドラーを追加する

例

例

同じ要素に多数のイベントハンドラーを追加する

例

例

イベントハンドラーをウィンドウオブジェクトに追加する

例

パラメータの受け渡し

例

イベントバブリングまたはイベントキャプチャ?

例

removeEventListener()メソッド

例

HTML DOMイベントオブジェクトリファレンス

プログラミング学習を加速させる

チュートリアル