【DOM 조작(전편)】JavaScript의 addEventListener에 대해서, 「・・하면」을 정리해 보았다

이번에는 JavaScript의 DOM 조작
addEventListener
에 대해 정리해 보았습니다.
DOM 조작 초보자의 참고가되면 기쁩니다.

기본 DOM 조작 (addEventListener)의 흐름

① 우선은 요소의 취득.
② 취득한 요소에 addEventListener로 처리를 추가한다
→이 addEventListener의 첫 번째 인수와 두 번째 인수가 중요합니다.

③처리의 "계기(제1인수)"를 기술
→⭐️ 이번 메인은 이 ③이 됩니다.

④ "처리를 함수내(제2인수)"에 기술
→→※이쪽은 다음 번(후편)으로 소개합니다...

※익숙한 분은 ①②는 날려 OK

①요소 획득

DOM 조작을 하기 위해서는 우선 HTML에 기술하고 있는 요소를 취득할 필요가 있습니다.
우선은 HTML상에서 button을 준비.

<button class="addButton">Add</button>

브라우저에 이런 버튼이 있으면 OK입니다.
이 버튼의 요소를 가져옵니다.

const btn = document.querySelector('.addButton');
// "btn"と定義しました。このbtnに処理をしていくという感じです。

※그 외 태그나 id로부터 취득하는 방법도 있습니다.

② 이벤트 추가 ("클릭하면 ...")

이벤트를 추가하는 방법도 여러 가지가 있지만,
이번은 "addEventListener"로.

// 先ほど定義したbtnにaddEvenListnerでイベント処理を追加
btn.addEventListener('③きっかけ', () => {
   ④何かしらの処理 
})

짜증나지만 이 형태로 기술합니다.
아직 익숙하지 않은 분은 이 모양을 하는 기억으로 괜찮습니다.

구체적으로 하나의 예를 보여줍니다.

// まずはbuttonの要素を取得
const btn = document.querySelector('.addButton');

// btnに対してaddEventListenerで’click’したら・・・を追加
btn.addEventListener('click', () => {
// コンソールにaddを表示
　　console.log('add')
});
// 結果的に”ボタンをクリック"したら"コンソールに"add"が表示される

이런 형태로 사용합니다.
다음 장에서는 여러 가지 예를 소개합니다.

③“계기가 되는 액션”(제1 인수)에 대해서

전편의 메인인 제1 인수의 레퍼토리를 일부 소개해 갑니다.

・클릭하면 → 'click'

btn.addEventListener('click', () => {
  console.log("クリックできてるよ");
});

・호버하면 → 'mouseover'

btn.addEventListener('mouseover', () => {
  console.log("hoverじゃないでmouseoverやで");
});

· 더블 클릭하면 → 'dblclick'

btn.addEventListener('dblclick', () => {
  console.log("ダブルクリックできてるよ");
});

・【입력란】입력하면(갱신하면) → 'input'

여기에서는 button이 아니라 input 요소로 해설해 갑니다.

const inputArea = document.querySelector("input");

input.addEventListener('input', () => {
  console.log("入力中");
});

이곳은 실시간으로 업데이트되는 상태.
다음 change와의 차이에 주의

・【입력란】값이 변화(확정)되면 → 'change'

여기는 주로 input 태그나 select 요소와 함께 사용됩니다.
입력하고 enter로 확인하면

input.addEventListener('change', () => {
  console.log("値が変わりました");
});

・【입력란】 포커스하면 → 'focus'

input.addEventListener('focus', () => {
  console.log("focusされてます");
});

・【입력란】 포커스가 벗어나면(다른 부분을 클릭하면) → 'blur'

input.addEventListener('blur', () => {
  console.log("外れた");
});

・【입력 폼】 폼 입력하여 송신(확정)되면 → 'submit'

☆중요:"form"에 addEventListener 하는 것( button이나 input이 아니다!!)

//formの要素取得
const formArea = document.querySelector('form');

formArea.addEventListener('submit', (e) => {
//  本来ならsubmitすることでページ遷移してしまう。
//  それを回避するためにpreventDefault(遷移してしまったら入力したものも消えてしまいます)
e.preventDefault
console.log("提出済")
});

요약

이번은 addEventListner의 제1 인수에 대한 소개가 되었습니다.
다음 번 (후편)에서는 함수 내에서 자주 사용하는 처리에 대해 소개하고 싶습니다.

끝까지 읽어 주셔서 감사합니다.