<button id="button">ボタン</button>
<p id="target">テキストをホバーすると色が変わります。</p>

<style>
  /* ボタンのスタイル */
  button {
    padding: 10px 20px;
    background-color: #0091ea;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }
</style>


// 問題1. イベント操作をしてください
// ボタンをクリックした際,要素のテキストが変化する
const button = document.getElementById('button')
button.addEventListener('click', function () {
  this.textContent = 'クリック済み'
})

//テキストをホバーした際、テキストの色が変化する
const text = document.getElementById('target')
text.addEventListener('mouseover', function () {
  text.style.color = '#0091EA'
})
text.addEventListener('mouseout', function () {
  text.style.color = '#000000'
})


document.addEventListener()

clickイベント

mouseoverイベント

イベントとは

DOMContentLoaded

無名関数（匿名関数）

HTMLを読み込ませてからイベントを処理

this

element.textContent

ボタンをクリックしてテキストを変更

createElement(tag_type)

element.appendChild(element)

【演習1】 クリックしたらリスト要素が追加されるボタンを実装しよう

changeイベント

checked

if文

else節

changeイベントをカスタマイズ

submitイベント

e.preventDefault()

value

submitイベントをカスタマイズ

HTMLFormElement.reset()

disabled

submitイベントをカスタマイズ2

else if

【演習2】 フォームを作成しよう

mouseoutイベント

element.style

mouseoverイベントをカスタマイズ

document.removeEventListener()

イベントの設定を削除

scrollイベント

scroll系

scrollイベントをカスタマイズ

【総合問題】ページトップへ戻るボタンを実装しよう

avaScript DOMイベント操作でアクションを実行しよう

「JavaScript DOM イベント操作でアクションを実行しよう」レッスンの総復習クイズです。

```html
<button id="myButton">クリックすると…</button>
```

```js
const button = document.getElementById('myButton');

button.addEventListener('click', function(){
    $(1).textContent = 'テキストが変わるよ！';
});
```

JavaScript DOM イベント操作でアクションを実行しようの総復習クイズ

JavaScript DOM イベント操作でアクションを実行しよう

イベントとは

まずは必要なスキルを確認しましょう！