JavaScriptをHTML DOMのEventListener2024 年の最新の入門チュートリアル。このコースでは addEventListener()メソッド,例,文法,オリジナルの要素は、イベントハンドラを追加します。,例,例,同じ要素に複数のイベントハンドラを追加します。,例,例,Windowオブジェクトにイベントハンドラを追加します。,例,パラメータを渡します,例,イベントのキャプチャやイベントバブル?,例,removeEventListener()メソッド,例,ブラウザのサポート,例,HTML DOMイベントオブジェクトのリファレンス, について学習できます。
イベントのリスニングユーザーがボタンをクリックしたときにトリガ:
addEventListener()メソッドは、指定された要素にイベントハンドラを追加するために使用されます。
イベントハンドラを追加するためには、addEventListener()メソッドは、既存のイベントハンドラを上書きしません。
あなたは一つの要素に複数のイベントハンドラを追加することができます。
2「クリック」イベント:あなたのような、同じ要素にイベントハンドラの同じタイプの複数を追加することができます。
あなたはだけでなく、HTML要素、任意のDOMイベントリスナーにオブジェクトを追加することができます。 以下のような:ウィンドウオブジェクト。
addEventListener()メソッドは、より簡単にイベント(バブリングとキャプチャ)を制御することができます。
あなたは、addEventListener()メソッドを使用すると、彫る左からのJavaScript、HTMLタグ、より読みやすいが、コントロールのHTMLタグが存在しない場合にも、イベントリスナーを追加することができます。
あなたは、イベントリスナーを削除するには、removeEventListener()メソッドを使用することができます。
最初のパラメータは、(そのような「クリック」または「マウスダウン」など)のタイプのイベントです。
第二引数は、関数呼び出しがイベントの後にトリガされています。
3番目のパラメータは、イベントのバブリングまたはキャプチャを記述するために使用されるブール値です。 このパラメータはオプションです。
注:「オン」の接頭辞を使用しないでください。 たとえば、代わりに "onclickの"の、 "クリック"を使用します。 |
ユーザーは、ポップアップ要素をクリックすると、「Hello Worldの!」:
あなたは、外部関数を参照するには、関数名を使用することができます。
ユーザーは、ポップアップ要素をクリックすると、「Hello Worldの!」:
addEventListener()メソッドを使用すると、同じ要素に複数のイベントを追加することができ、既存のイベントを上書きしません。
あなたは、さまざまな種類のイベントで同じ要素に追加することができます。
addEventListener()メソッドでは、HTMLのDOMイベントリスナーにオブジェクトを追加することができ、HTML DOMは、オブジェクトのような:HTML要素、HTML文書、ウィンドウオブジェクト。 イベントオブジェクトまたはのようなその他の費用:XMLHttpRequestオブジェクト。
ユーザーは、イベントリスナーを追加するために、ウィンドウサイズをリセットする場合:
パラメータ値を渡すときは、パラメータ「無名関数」で関数呼び出しを使用します。
バブリングとキャプチャ:2つの方法でイベント配信。
イベントトリガ定義された要素のイベント配信のため。 あなたは<pは> <div>要素への要素は、ユーザーがクリックする<p>要素、「クリック」イベントの要素は、それをトリガーする場合は?
すなわちバブリング、イベントは、外部の要素をトリガ、内部素子がトリガされるようになります:クリックイベント<p>要素が最初にトリガされ、その後、クリックイベントの<div>要素がトリガされます。
クリックイベントをトリガし、その後、クリックイベント<p>要素をトリガするために、<div>要素: キャプチャでは、イベントは、外部要素は、そのイベントがトリガされる内部要素、すなわちトリガされることになります。
配信の種類を設定する」useCapture」パラメータを指定するためには、addEventListener()メソッド:
デフォルト値は、その値がtrueの場合、転送をキャプチャするためにイベントを使用し、渡すためにバブリングされ、falseです。
イベントハンドラを追加するためには、addEventListener()メソッドを削除するには、removeEventListener()メソッド:
表中の数字は、メソッドのバージョン番号をサポートする最初のブラウザを表します。
ウェイ | |||||
---|---|---|---|---|---|
addEventListenerを() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注:IE 8とIEの以前のバージョンを、オペラ7.0およびそれ以前のバージョンでは、addEventListenerを()とにremoveEventListener()メソッドをサポートしていません。 しかし、ブラウザのバージョンのこのタイプは、イベントハンドラを削除するdetachEvent()メソッドを使用することができます。
クロスブラウザのソリューション:
すべてのHTML DOMイベントは、あなたが当社の完全見ることができますHTML DOMイベントオブジェクトの参照を 。