English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript オブジェクト

JavaScript リファレンスマニュアル

JS DOM リファレンスマニュアル

HTML DOM addEventListener() メソッド

HTML DOM エレメントオブジェクト

element.addEventListener()このメソッドは、指定された要素にイベントハンドラを追加します。

使用element.removeEventListener()このメソッドは、addEventListener()メソッドと一緒に追加されたイベントハンドラを削除します。

使用document.addEventListener()このメソッドは、イベントハンドラをドキュメントに追加します。

文法：

element.addEventListener(event, listener, useCapture)
var　x　=　document.querySelector("button");
x.addEventListener("click",　function()　{
alert("Hello　World!!!");
});
テストを見て‹/›

ブラウザ互換性

このテーブルの数字は、addEventListener()メソッドを完全にサポートする最初のブラウザバージョンを指定します：

メソッド
addEventListener()1171.09

引数の値

引数説明
event（必須）イベントは任意の有効なJavaScriptイベントです。イベントを使用する際には「on」接頭辞を使用しません。例えば「click」を使用して「onclick」、または「mousedown」を使用して「onmousedown」を代わりにします。
すべてのHTML DOMイベントのリストについては、私たちの完全なHTML DOMイベントオブジェクトリファレンス。
listener（必須）イベント発生に対して応答するJavaScript関数です。
イベントが発生した際には、イベントオブジェクトが最初の引数として関数に渡されます。イベントオブジェクトのタイプは指定されたイベントによって異なります。例えば、「click」イベントはMouseEventオブジェクトです。
useCapture（オプション）ブール値、キャプチャフェーズまたはバブルフェーズでイベントを実行するかを指定します。デフォルトはfalseです。
可能な値：

  • true-イベントハンドラはキャプチャフェーズで実行されます

  • false-イベントハンドラはバブルフェーズで実行されます

私たちのJavaScriptイベント伝播チュートリアルでイベントの伝播に関する更多信息を読む

技術的詳細

返り値：ない
DOMバージョン：DOM 2級

更多实例

この例では、外部の「命名」関数を参照しています：

document.querySelector("button").addEventListener("click",　myFunc);
function　myFunc()　{
　　　document.body.style.backgroundColor　=　"coral";
}
テストを見て‹/›

要素に多くのイベントを追加できますが、既存のイベントを上書きしません：

document.querySelector("button").addEventListener("click",　myFunc);
document.querySelector("button").addEventListener("click",　anotherFunc);
テストを見て‹/›

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

document.querySelector("button").addEventListener("mouseenter",　myFunc1);
document.querySelector("button").addEventListener("click",　myFunc2);
document.querySelector("button").addEventListener("mouseout",　myFunc3);
テストを見て‹/›

パラメータの値を渡す場合、アノニマス関数を使用し、指定された関数をパラメータで呼び出す：

var　btn　=　document.querySelector("button");
btn.addEventListener("click",　function()　{
myFunc(x,　y);
});
テストを見て‹/›

関連リファレンス

JavaScript 教程：イベントリスナー

JavaScript 教程：イベント伝播

HTML DOMリファレンス：element.removeEventListener()

HTML DOMリファレンス：document.addEventListener()

HTML DOM エレメントオブジェクト

JavaScript ヒストリーオブジェクトHTML DOM エレメントオブジェクト