addEventListenerを使ったイベントリスナーの追加

  • はじめに JavaScriptのDOM操作とイベント処理について学びましょう。今回は、「イベントリスナーの設定と削除」の節の「addEventListenerを使ったイベントリスナーの追加」について見ていきましょう。
Gal Normal

イベントリスナーってなに？

Geek Curious

ページ上で起こるアクションや操作を検出して、それに応じた処理を実行するものだよね？

Gal Happy

そうなの！イベントリスナーは、ユーザーがページで何かアクションを起こしたときに、そのアクションに応じた処理を実行するための機能なの！

  • addEventListenerを使ったイベントリスナーの追加
Gal Pleased

イベントリスナーを追加するには、 addEventListener メソッドを使って、イベント名と実行したい関数を指定するの。例えば、こんな感じ！

const buttonElement = document.querySelector('#myButton');
buttonElement.addEventListener('click', function() {
    console.log('Button clicked!');
});
Geek Happy

なるほど、 addEventListener メソッドでイベント名と実行したい関数を指定するんだね！

Gal Happy

そうなの！この例では、 click イベントが発生したときに、「Button clicked!」とコンソールに表示するようになっているの！

  • イベントリスナーの動作
Geek Curious

じゃあ、ボタンがクリックされるたびに、その関数が実行されるってこと？

Gal Happy

その通り！ボタンがクリックされるたびに、「Button clicked!」とコンソールに表示されるわ！

  • おわりに JavaScriptのaddEventListenerメソッドを使って、イベントリスナーを追加することができます。これで、ユーザーがページで何かアクションを起こしたときに、そのアクションに応じた処理を実行できるようになりましたね！😀