mouseoverイベント

mouseoutイベント

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

<button id="button">詳細はここをクリック</button>

<style>
  #button {
    padding: 16px 24px;
    background-color: #2cb8d1;
    width: 320px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 40px auto;
    text-align: center;
    font-size: 20px;
    transition: 0.3s;
  }
</style>


const button = document.getElementById('button')

// 問題1. ボタンをホバーした際にボタンの色を変化させてください
button.addEventListener('mouseover', function () {
  button.textContent = '詳細を見る！'
  button.style.backgroundColor = '#176675'
})

// 問題2. ホバーを解除した際に、ボタンの色が元に戻るようにしてください
button.addEventListener('mouseout', function () {
  button.textContent = '詳細はここをクリック'
  button.style.backgroundColor = '#2cb8d1'
})


const button = document.getElementById('button')

// 問題1. ボタンをホバーした際にボタンの色を変化させてください
button.addEventListener('', function () {
  button.textContent = '詳細を見る！'
})

// 問題2. ホバーを解除した際に、ボタンの色がもとに戻るようにしてください
button.addEventListener('', function () {
  button.textContent = '詳細はここをクリック'
})


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

document.addEventListener()

clickイベント

イベントとは

DOMContentLoaded

無名関数（匿名関数）

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

this

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

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

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

element.textContent

~~~javascript
var element = $(1).getElementById($('2'));
element.textContent = $('3');
console.log(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】 フォームを作成しよう

document.removeEventListener()

イベントの設定を削除

scrollイベント

scroll系

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

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

イベント処理の基礎を学び、ページにインタラクティブな動作を追加する方法を習得します。
実際のウェブサイト制作に直結する知識が身につきます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【基礎を学ぼう🔰】はじめて学ぶDOM操作入門

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

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

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