JS / 01 +02 / 기초-11

DOMADO·2024년 6월 12일
0

JS

목록 보기
14/16

✅ Event 객체

  • 이벤트 정보를 저장하고 있는 객체

  • 어떤 요소에서 이벤트가 발생했는지

  • 어떤 종류의 이벤트가 발생했는지 정보 포함



[ ❗ ❗ ] 매개변수 event, e . .😵?

-별도로 매개변수를 선언하지 않아도, 이벤트 함수내에서 자동으로 전달
-상황에 따라서, 이벤트 객체(event,e)가 필요한 경우도 / 아닌 경우도 有


event.preventDefault()
👉 Event 동작 취소

  • 요소의 기본 이벤트 동작(이벤트 핸들링)을 취소하는 메소드
  • 하이퍼링크 태그를 막아야 할 경우
  • form태그 안에 submit 동작을 막아야 할 경우 (입력한 값 유효성 검사)


event.target : 이벤트가 발생한 요소 반환

  • 말 그대로, 이벤트가 발생한 그 요소 자체를 반환


[ ❗️❓] 뭔가 이상한데요 ? . . 🤯

이때까지, 객체에 진입할 때
👉 document.getElementsByName(ID명) ;

위 패턴으로 코드를 썼는데 이번 form 태그 에서는
👉 document.form이름.요소이름 이런식으로 진입하네요 ?

✅ form 태그에 진입할 때 !

👉 document.form이름
-form 요소의 name 속성값을 통해 접근합니다.

예)

<formname="frm">
   입력하세요<input type="text" name="answer">

document.frm.answer 
: document의 (form태그)의 frm의 (input의) answer 위치에 진입 !

[❗️] document.getElementsByName(ID명) ; 이걸로 계속 쓰고 싶어요 🥹

1️⃣ name 속성은 id와 다르게 중복이 가능한 그룹화 속성이다.
2️⃣ getElementsByName(ID명) ❌❌
3️⃣ getElementsByName(Name명) ⭕️⭕️
4️⃣ 중복이 가능한, HTML Collention 객체 (유사배열) 이다.

(❗️) 따라서, 배열 즉, 인덱스 를 통해 불러와야 한다.

✅ getElementsByName("btn")은 해당 이름을 가진 **모든 요소 반환**

* 유사배열의 형태로 반환한다.

* 원하는 이름에 접근하려면 🔴인덱싱🔴을 통해 접근해야한다. 

* 이름이 단 한개라도, Name 속성은 중복이 가능하기 떄문에,
  무조건 유사배열 형태로 반환된다.
  
* 인터프리터 스크립트 언어니까, 위에서 부터 먼저 나오는 Name속성이 첫번째


결론은, form 태그내 name 속성에 진입 할 때는 더 간단하고 편한
👉 document.form이름.name이름 쓰자 ...😅 
profile
▪️ 검정 테마를 기준으로 작성되었읍니다.

0개의 댓글