の addEventListener() メソッドは、イベント ハンドラーを特定の要素にアタッチするために使用されます。既存のイベント ハンドラーはオーバーライドされません。イベントは JavaScript の重要な部分であると言われています。 Web ページは、発生したイベントに応じて応答します。イベントはユーザーが生成することも、API によって生成することもできます。イベント リスナーは、イベントの発生を待つ JavaScript のプロシージャです。
addEventListener() メソッドは、 JavaScript 。既存のイベント ハンドラーを上書きせずに、特定の要素に複数のイベント ハンドラーを追加できます。
構文
element.addEventListener(event, function, useCapture);
パラメータは 3 つありますが、 イベント そして 関数 広く使われています。 3 番目のパラメータの定義はオプションです。この関数の値は次のように定義されます。
パラメータ値
イベント： これは必須のパラメータです。イベント名を指定する文字列として定義できます。
注: パラメーター値には「on」などの接頭辞を使用しないでください。たとえば、「onclick」の代わりに「click」を使用します。
関数： これも必須パラメータです。それは JavaScript関数 イベントの発生に応答します。
複数のテーブルSQLから選択
使用キャプチャ: これはオプションのパラメータです。イベントをバブリングフェーズで実行するかキャプチャフェーズで実行するかを指定するブール型の値です。可能な値は次のとおりです。 真実 そして 間違い 。 true に設定すると、イベント ハンドラーはキャプチャ フェーズで実行されます。 false に設定すると、ハンドラーはバブリングフェーズで実行されます。そのデフォルト値は次のとおりです 間違い 。
addEventListener() メソッドの使用例をいくつか見てみましょう。
例
これは、addEventListener() メソッドを使用する簡単な例です。指定されたものをクリックする必要があります HTMLボタン 効果を確認します。
addEventListener() メソッドの例。
効果を確認するには、次のボタンをクリックしてください。
クリックしてください document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '' + 'javaTpoint.com へようこそ'; }今すぐテストしてください
出力
指定された HTML ボタンをクリックすると、出力は次のようになります -
次の例では、既存のイベントを上書きせずに、同じ要素に多数のイベントを追加する方法を見ていきます。
例
この例では、同じ要素に複数のイベントを追加しています。
氷と雪の違い
これは、同じ要素に複数のイベントを追加する例です。
効果を確認するには、次のボタンをクリックしてください。
クリックしてください function fun() {alert('javaTpoint.com へようこそ'); function fun1() { document.getElementById('para').innerHTML = 'これは 2 番目の関数です'; function fun2() { document.getElementById('para1').innerHTML = 'これは 3 番目の関数です'; var mybtn = document.getElementById('btn'); mybtn.addEventListener('クリック'、楽しい); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);今すぐテストしてください出力
ハッシュマップJava
ここで、ボタンをクリックすると、アラートが表示されます。指定された HTML ボタンをクリックすると、出力は次のようになります -
アラートを終了すると、出力は次のようになります -
例
この例では、異なるタイプの複数のイベントを同じ要素に追加しています。
これは、同じ要素に異なるタイプの複数のイベントを追加する例です。
効果を確認するには、次のボタンをクリックしてください。
クリックしてください function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = '黄色'; btn.style.color = '青'; function fun1() { document.getElementById('para').innerHTML = 'これは 2 番目の関数です';関数 fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);今すぐテストしてください出力
カーソルをボタンの上に移動すると、出力は次のようになります -
JavaScript 印刷
ボタンをクリックしてカーソルを離れると、出力は次のようになります -
イベントバブリングまたはイベントキャプチャ
これで、JavaScript の addEventListener() の 3 番目のパラメーターの使用法がわかりました。 キャプチャを使用します。
HTML DOM では、 泡立つ そして 捕獲中 イベントの伝播には 2 つの方法があります。例を挙げると、これらの方法を理解できます。
div 要素とその中に段落要素があり、 'クリック' を使用して両方にイベントを送信します addEventListener() 方法。ここで問題は、段落要素をクリックすることです。どの要素のクリック イベントが最初に処理されるかです。
それで、 泡立つ、 最初に段落要素のイベントが処理され、次に div 要素のイベントが処理されます。これは、バブリングでは、内側の要素のイベントが最初に処理され、次に最も外側の要素のイベントが処理されることを意味します。
で 捕獲中 div 要素のイベントが最初に処理され、次に段落要素のイベントが処理されます。これは、キャプチャ時に外側の要素のイベントが最初に処理され、次に最も内側の要素のイベントが処理されることを意味します。
java 現在の日付を取得する
addEventListener(event, function, useCapture);
を使用して伝播を指定できます。 使用キャプチャ パラメータ。 false (デフォルト値) に設定すると、イベントはバブリング伝播を使用し、true に設定すると、キャプチャ伝播を使用します。
私たちは理解できます 泡立っている そして 捕獲する イラストを使って。
例
この例には、2 つの div 要素があります。最初の div 要素ではバブリング効果が、2 番目の div 要素ではキャプチャ効果が確認できます。
最初の div 要素のspan要素をダブルクリックすると、span要素のイベントがdiv要素よりも先に処理されます。いわゆる 泡立っている 。
ただし、2 番目の div 要素の scan 要素をダブルクリックすると、span 要素よりも div 要素のイベントが最初に処理されます。いわゆる 捕獲する 。
div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true); 今すぐテストしてください 出力
効果を確認するには、特定の要素をダブルクリックする必要があります。