JS / 01 / 기초-10

✅ Event (이벤트)

• 웹페이지에서 사용자에 의해 발생되는 사건
• 상호작용 : 이벤트 속성(이벤트 핸들러) 실행
• 마우스 클릭, 키 입력, 페이지스크롤 등

---

외우지 말고, 아 ! 이런게 있구나 🙂‍↕️

---

✅ Event Handler (이벤트 핸들러)
= 이벤트 속성

• 사용자가 이벤트를 발생시켰을 때
  👉 그 이벤트에 대응하여 처리하는 함수

✔️ Event 연결방법 3가지

① 인라인 방식

• HTML요소에 직접 'on~' 으로 시작하는 이벤트 속성 정의 후, 함수 연결

• 보안에 취약 (개발자모드에서 다 보임)

• 한 요소당 하나의 이벤트만 등록 가능
  

1) body 태그에서 버튼을 'onclick'시 ▶ 함수() 실행 한다.
2) 할당한 id의 요소 객체 정보를 가져온다. ▶ 가져온 후 변수에 할당
3) script 부분에, 함수 입력

[ ❗️ ] 밑에 화살표 함수에서, 매개변수 설정(let,const) 없이 바로 사용이 가능한 이유 ? 

👉 JS에서 변수 선언 하지 않고, 바로 함수 선언이 가능하다.
👉 전역변수를 참고하여 작동 된다.

---

1) 입력(input) 버튼을 만든 후 id를 할당한다
2) body 태그에 버튼을 'onclick'시 ▶ 함수() 실행 한다.
3) 해당하는 id의 요소 객체 정보를 가져온다. ▶ 가져온 후 변수에 할당
4) script 부분에, 함수 입력

---

1) body태그에 버튼을 'onclick'시 ▶ 함수() 실행 한다.
2) 해당하는 id의 요소 객체 정보를 가져온다. ▶ 가져온 후 변수에 할당
3) script 부분에, 함수 입력

---

② 프로퍼티 방식

• document.요소명.'on~'이라는 이벤트 속성을 통해,
  이벤트 속성에 접근 후 실행할 함수 연결

• 하나의 함수만 사용 가능

• 다른 함수로 덮어쓰기 가능

• 개발자모드에서 안 보임

1) body태그에 버튼의 id를 지정
2) 버튼 id의 요소 객채 정보를 가져온 후
3) 변수에 할당
4) 변수.'on~'이라는 이벤트 속성 = 함수  실행 

*❗) 변수에 할당 하지 않고 바로, 
document.getElementById("btn_han").onclick = popUp2 ; 

⭐❗❗) 함수인데 () 안 쓰는 이유 : JS에서 함수 뒤에 () 쓰면 바로 함수호출
우리가 쓰고 싶은건, 함수참조(이벤트 핸들러로 작동)

---

[ ❗ 必 ❗] 'on~' 이 뭔데 ? . . 😵

• 이벤트 종류 = 이벤트 이름 = 이벤트 타입
• 이벤트 속성 = 이벤트 핸들러

• 이벤트 : 사용자에 의해 발생되는 사건
  예) 마우스를 클릭, 키보드를 입력, 엔터를 쳤다.

  [❗] ONLY 사건 : 그 후 리턴값이 있지 않은 사건 그 자체
  +) 이벤트 속성(이벤트 핸들러)를 연결
  

• 이벤트 속성 = 이벤트 핸들러 : 발생한 이벤트를 처리하는 속성

  

  ✔️ 이벤트 속성 中 하나가 'on~ + 이벤트이름'

  • 인라인 방식, 프로퍼티 방식에서 이 방식을 사용
  • 하나의 함수만 할당 가능 (아니면 덮어씌움)

---

③ addEventListener (이벤트리스너)

• 하나의 이벤트에 여러개의 이벤트 핸들러 등록이 가능
• 재사용 좋다
• 권장사항
• 요소명.addEventListener('이벤트이름', 실핼할함수)

1) 버튼 id의 요소 객채 정보를 가져온 후
2) 변수에 할당
3) 요소명.addEventListener('이벤트이름', 실핼할함수) ;  실행

*) 함수를 미리 만들고, 함수를 불러와도 되고,
아래 처럼 바로 실행할함수에 함수를 작성 해도 된다 !

---