1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

イベント処理

Last updated at Posted at 2024-02-02

DOM操作におけるイベント処理とは

DOM操作におけるイベントとは、ブラウザを利用する以下のようなユーザーの行動のことを指す。

  • 「ボタンをクリックしたとき」
  • 「(横線3本のアイコン)をクリックしたとき」
  • 「画面をスクロールしたとき」など、
    → ユーザーの行動に合わせて、あらかじめプログラムしていたDOM操作を行うのがイベント処理。

ボタンを押すとテキストが表示される処理

現状 「ポチッと!」のボタンがひとつだけ。
スクリーンショット 2024-02-02 14.35.11.png

HTMLコードの追加

ボタンをもうひとつ作成。
スクリーンショット 2024-02-02 14.43.56.png

スクリーンショット 2024-02-02 14.42.19.png

.jsファイルでコードを記述

'もひとつポチッと!'ボタンを押したときの挙動は、

  1. li要素を新しく作成する
  2. 作成したli要素に「ThankYou!×2」というテキストを追加する
  3. 作成したli要素をul要素の子要素として末尾に追加する
// 'もひとつポチッと!'ボタンのadd-btnというidを取得し、定数に代入
const addBtn = document.getElementById('add-btn');
// parent-listというidを持つHTML要素を取得し、定数に代入する
const parentList = document.getElementById('parent-list');

// HTML要素がクリックされたときにイベント処理を実行する
addBtn.addEventListener('click', () => {
// li要素を新しく作成する
const childList = document.createElement('li');

//作成したli要素に「ThankYou!×2」というテキストを追加する
childList.textContent = 'ThankYou!×2';

// 作成したli要素をul要素の子要素として末尾に追加する
parentList.appendChild(childList);
});

結果

もひとつポチッと!ボタン押下の前
スクリーンショット 2024-02-02 14.50.47.png
もひとつポチッと!ボタン押下のあと
スクリーンショット 2024-02-02 14.55.47.png

が追加されている。

イベントの種類

click クリックしたとき(マウスボタンを押して離したとき)
mousedown マウスボタンを押したとき
mouseup マウスボタンを離したとき
mousemove マウスカーソルを移動したとき
keydown キーボードのキーを押したとき
keyup キーボードのキーを離したとき
submit フォームを送信したとき
focus HTML要素にフォーカスしたとき
scroll 画面をスクロールしたとき

《まとめ》

HTML要素.addEventListener('イベントの種類', () => {
  イベント処理 //<li>要素を追加してテキストを表示など
});

選択されたラジオボタンの値を取得できる処理

先に完成形

血液型を選択して、値を取得ボタンを押下すると、値が表示される。
スクリーンショット 2024-02-02 21.42.56.png

HTMLファイルの記述

#先ほどのHTMLファイルに下記を追加
  <form name="areaForm">
    <input type="radio" name="area" value="typeA" />A型
    <input type="radio" name="area" value="typeO" />O型
    <input type="radio" name="area" value="typeAB" />AB型
  </form>
  <button id="area-btn">値の取得</button>

.jsファイルにコードを記述

// os-btnというidを持つHTML要素を取得し、定数に代入する
const areBth = document.getElementById('area-btn');
// HTML要素がクリックされたときに
areBth.addEventListener('click' , () => {
// 選択されたラジオボタンの値を取得する
const area = document.forms.areaForm.area.value;
// 取得した値を出力する
console.log(area);
});

補足

先に、html要素.addEventlistener('click', )=> {}); の、クリックされた時何を表示・取得させるかから考えて、書き出したらわかりやすいかも?

getElementById()を使っても良いが、formの場合はnameの値を使うことで簡単に取得できる。続けてinput typeの、nameの値を記述すれば、valueを取得できる。
注意点:HTMLのid名やclass名にハイフン-を使ってしまうと、JavaScriptでエラーが発生してしまうので気を付ける。

スクリーンショット 2024-02-02 21.59.00.png

// 選択されたラジオボタンの値を取得する
const area = document.forms.areaForm.area.value;

チェックボックスの値を取得できる処理

チェックボックスがラジオボタンと異なる点は「複数の項目を選択できる」という点。なので、選択されたすべての値を出力するためにfor文とif文を組み合わせて使う。

おさらい

  • for文
for (カウンタ変数の初期値; 条件式; カウンタ変数の増減値) {
  カウンタ変数が決まった値になるまで繰り返す処理
}
  • if文
if (条件式) {
  条件が成り立つときの処理
}
  • 使用するプロパティ
#チェックが入るとtrueを返す
チェックボックス.checked

#チェックボックスの数だけ処理を繰り返すfor文に使う
.length

先に完成形

スクリーンショット 2024-02-03 8.23.50.png

HTMLファイルの記述

<div>
  <form name="cityForm">
   行ったことのある街を選択してください<br/>
    <input type="checkbox" name="city" value="osaka" />大阪
    <input type="checkbox" name="city" value="koube" />神戸
    <input type="checkbox" name="city" value="kyouto" />京都
    <input type="checkbox" name="city" value="nara" />奈良
    <input type="checkbox" name="city" value="wakayama" />和歌山
   </form>
  </div>
  <button id="city-btn">値の取得</button>

javascriptの記述

const cityBtn = document.getElementById('city-btn');
// HTML要素がクリックされたときに
cityBtn.addEventListener('click' , () => {
// 全てのチェックボックスを配列風のデータで取得
const items = document.forms.cityForm.city;
// 繰り返し処理でチェックボックスを1つずつ取り出し、もし選択されていれば値を出力する
for(let i =0; i < items.length; i++){
if(items[i].checked ){
  console.log(items[i].value);
}
}
});

まとめ

  1. formの場合はname属性の値を使うことで、簡単にHTML要素を取得できる。
  2. フォームの値を取得するには.valueプロパティを使う
  3. 文字列の文字数を取得するには.lengthプロパティを使う
  4. チェックボックスに対してcheckedプロパティを使うことで、選択されているかどうかをtrueまたはfalseで取得できる
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?