最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

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

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScript HTML DOMのEventListener


addEventListener()メソッド

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

document.getElementById("myBtn").addEventListener("click", displayDate);
»それを自分で試してみてください

addEventListener()メソッドは、指定された要素にイベントハンドラをアタッチします。

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

あなたは一つの要素に多くのイベントハンドラを追加することができます。

次の2つ、すなわち、一つの要素に同じタイプの多くのイベントハンドラを追加することができます"click"イベント。

あなたは、任意のDOMオブジェクトだけでなく、HTML要素にイベントリスナーを追加することができます。 ウィンドウオブジェクトすなわち。

addEventListener()メソッドは、それが簡単にイベントがバブリングにどのように反応するかを制御することができます。

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

あなたは簡単に使用してイベントリスナーを削除することができますremoveEventListener()メソッドを。


構文

element .addEventListener( event, function, useCapture );

最初のパラメータは、(のようなイベントの一種である"click"または"mousedown" )。

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

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

あなたが使用していないことに注意してください"on"イベントの接頭辞。 使用する"click"の代わりに"onclick"


要素にイベントハンドラを追加します。

アラートに "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);
»それを自分で試してみてください

Windowオブジェクトにイベントハンドラを追加します。

addEventListener()メソッドを使用すると、のように、イベントをサポートするHTML要素、HTML文書、ウィンドウオブジェクト、または他のオブジェクトとして任意のHTML DOMオブジェクトにイベントリスナーを追加することができxmlHttpRequestオブジェクト。

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

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext ;
});
»それを自分で試してみてください

パラメータを渡します

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

element .addEventListener("click", function(){ myFunction(p1, p2); });
»それを自分で試してみてください

イベントバブルやイベントのキャプチャ?

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

イベントの伝播は、イベントが発生したときに要素の順序を定義する方法です。 あなたが持っている場合は<p>内部要素<div>要素、およびをユーザーがクリックする<p>要素を、要素のどの"click"イベントが最初に処理すべきか?

バブリングでは、最も内側の要素のイベントは、最初にして外側に処理される<p>要素のクリックイベントが、最初に処理された後<div>要素のクリックイベントを。

:最も外側の要素のイベントが最初にして内部処理されますキャプチャ<div>要素のクリックイベントが最初に処理され、その後、 <p>要素のクリックイベント。

addEventListener()メソッドあなたが使用して伝播タイプを指定することができます"useCapture"パラメータを:

addEventListener( event , function , useCapture );

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

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
»それを自分で試してみてください

removeEventListener()メソッド

removeEventListener()メソッドは、に添付されたイベントハンドラ削除addEventListener()メソッドを:

element .removeEventListener("mousemove", myFunction);
»それを自分で試してみてください

ブラウザのサポート

表中の数字は完全にこれらのメソッドをサポートする最初のブラウザのバージョンを指定します。

方法
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注: addEventListener()removeEventListener()メソッドは、IE 8とそれ以前のバージョンでサポートされていませんOpera 6.0およびそれ以前のバージョン。 しかし、これらの特定のブラウザのバージョンは、あなたが使用することができますattachEvent()要素にイベントハンドラをアタッチする方法を、およびdetachEvent()メソッドは、それを削除するには:

element. attachEvent (event, function);
element.
detachEvent (event, function);

クロスブラウザのソリューション:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}
»それを自分で試してみてください

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

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