JavaScriptの基本的なチュートリアル

JavaScriptオブジェクト

JavaScript関数

JSHTMLDOM

JSブラウザBOM

AJAXの基本的なチュートリアル

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

JavaScriptのイベントの伝播 JavaScriptのイベント(Events)

JavaScriptのイベントリスナー

JavaScriptの最新のイベントハンドラ機能はイベントリスナーです。イベントリスナーは要素上のイベントを監視します。

私たちは、addEventListener()を使用して、イベントを直接要素の属性に割り当てる代わりにメソッドを追加します。

addEventListener()メソッド

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

前章から引き継いだランダムな色の例を以下のように書き直すことができます：

例

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
para.innerHTML = "Hello world";

テストを見て‹/›

私たちはまだ、以前同じbgChange()関数。私たちは、addEventListener()このメソッドはボタンにメソッドを追加します。

addEventListener() 必須の2つの引数を受け入れます。-監視するイベントとリスナーのコールバック関数です。

このメソッドは前章のイベントハンドラ属性と似ていますが、文法が明らかに異なります。

文法：

element.addEventListener(event, listener, useCapture)

一つ目の引数は、イベントのタイプ（例えば「click」または「mousemove」）です。

第2引数はイベントが発生した際に呼び出すリスナー関数です。

第3引数はボールルームまたはキャプチャを使用するかどうかを指定する布尔値です。この引数はオプションです。

注意してください。イベントには「on」接頭辞を使用しないでください。代わりに「click」を使用してください。

イベントリスナーを要素に追加してください。

注意してください。すべてのコードを以下にまとめてください：addEventListener()メソッド内のアノニマス関数には非常に適しています。以下のようになります：

例

let　para　=　document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

テストを見て‹/›

外部「命名」関数を参照することができます：

例

let　para　=　document.querySelector("#para");
let para = document.querySelector("#para");
para.addEventListener("click", changeText);
　　　function changeText() {
para.innerHTML = "Hello world";

テストを見て‹/›

}

同じ要素に複数のイベントリスナーを追加

例

最初に見ると、イベントリスナーとイベントハンドラ属性が非常に似ているように見えますが、いくつかの利点があります。以下の例のように、同じ要素に複数のイベントリスナーを設定できます：
document.querySelector("button").addEventListener("click", myFunc);

テストを見て‹/›

document.querySelector("button").addEventListener("click", anotherFunc);

例

要素に異なるタイプのイベントを追加できます：1document.querySelector("button").addEventListener("mouseout", myFunc
document.querySelector("button").addEventListener("mouseenter", myFunc2document.querySelector("button").addEventListener("mouseout", myFunc
document.querySelector("button").addEventListener("click", myFunc3document.querySelector("button").addEventListener("mouseout", myFunc

テストを見て‹/›

);

パラメータを渡します

例

パラメータの値を渡す場合は、匿名関数を使用し、その関数にパラメータを渡して指定された関数を呼び出します：
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
});

テストを見て‹/›

myFunc(x, y);

Windowオブジェクトにイベントリスナーを追加することもできます：addEventListener()さらに、以下のようにドキュメントおよびウィンドウオブジェクトに使用されます。

このサンプルでは以下を使用しています：addEventListener()クリックイベントをドキュメントに追加する方法：

例

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

テストを見て‹/›

このサンプルでは、以下を使用しています：addEventListener()イベントのリサイズ(resize)をウィンドウに追加する方法：

例

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

テストを見て‹/›

現在、イベントリスナーは、JavaScriptでイベントを処理する最も一般的で推奨される方法です。

removeEventListener()メソッドを使用できます。

また、このremoveEventListener()要素から一つまたはすべてのイベントを削除する方法です。

例

var box = document.getElementById("para");
//　id="para"のP要素にイベントリスナーを付ける
box.addEventListener("mousemove", myFunc);
//　id="para"のP要素からイベントリスナーを削除します。
box.removeEventListener("mousemove", myFunc);

テストを見て‹/›

一つ目の引数は、イベントのタイプ（例えば「click」または「mousemove」）です。

二番目の引数は、イベントが発生したときに呼び出す関数です。

さらに読む

JavaScript 参考です：HTML DOMイベントオブジェクト参考

JavaScriptのイベントの伝播 JavaScriptのイベント(Events)