`document.addEventListener()`は、JavaScriptのDOM（Document Object Model）で使われる関数です。これは、ウェブページ上の特定の要素に対して何か特定の事象（イベント）が起こったときに、何か特定の動作（関数）を行うように指示するために使います。例えば、ボタンがクリックされたときにメッセージを表示する、といったことができます。 ## 使い方基本的な使い方は以下のようになります。次のように引数を指定します。 ~~~javascript 対象要素.addEventListener( 種類, 関数, false ) ~~~ 第1引数はイベントの種類、第2引数は実行させる関数を指定します。第3引数は`true`か`false`のどちらかを指定できますが、通常は`false`を選択します。 ## 例1: ボタンをクリックしたときにメッセージを表示するボタンがクリックされたときに、「ボタンがクリックされました」というメッセージを表示する例です。 ~~~html-preview ~~~ このコードでは、まず`document.querySelector('button')`でボタンを選択しています。その後、`addEventListener`を使って、そのボタンがクリックされたときに`alert('ボタンがクリックされました');`というコードを実行するように指示しています。 ## 例2: マウスが要素の上に乗ったときに色を変えるマウスが特定の要素の上に乗ったときに、その要素の色を変える例です。 ~~~html-preview

マウスオーバーすると背景色が変わるよ

~~~ このコードでは、まず`document.querySelector('p')`で`p`要素を選択しています。その後、`addEventListener`を使って、その`p`要素の上にマウスが乗ったときに`this.style.backgroundColor = 'red';`というコードを実行するように指示しています。これにより、マウスが`p`要素の上に乗るとその背景色が赤に変わります。 ## 使用例 - ボタンをクリックしたら、アラームのポップアップを出す - スクロールをするとアニメーションが動き出す - Webページが読み込み完了してから特定の処理を実行する ## 注意点 HTMLを対象要素に設定する場合は、定数または変数に代入してから使用することが推奨されています。 ~~~javascript // 画面をスクロールされる度にイベントを実行する const scrollHandler = () => { console.log('スクロールされました！') } window.addEventListener(scroll, scrollHandler, false) // HTMLのid属性を取得する const button = document.getElementById('button') // 該当の要素がクリックされる度にイベントを実行する button.addEventListener('click', () => { console.log('クリックされました！') }) ~~~

JavaScript CSSスタイルをDOMで操作しようの総復習クイズ 学習結果

JavaScript CSSスタイルをDOMで操作しようの総復習クイズ学習結果