이벤트2_개념_addEventListener

이벤트2_개념_addEventListener

---

• 이벤트addListener방법
• 온클릭이과 햇갈리면 안된데. 소괄호가 없다.
• id="btn": 이 버튼을 자바스크립트에서 찾기 위한 이름표예요.
  → id는 고유해야 하고, CSS나 JS에서 특정 요소를 정확하게 식별할 때 사용합니다.
• .querySelector(...): HTML 요소를 CSS 선택자 방식으로 찾는 함수

_01_이벤트addListener방법.html

---

• 문제 
• 전체 흐름 다시 쉽게 정리!
  1. 버튼이 웹페이지에 보임
  2. 자바스크립트가 id="btn"인 버튼을 찾아서 변수에 저장
  3. 그 버튼에 "클릭 이벤트"를 연결함
  4. 클릭하면 clickMe2 함수가 실행됨
  5. 함수 안의 alert가 동작해서 팝업창이 뜸

_01_이벤트addListener방법.html

---

• _02_이벤트두개추가.html
• 일반버튼은 누른때 반응을 안하고. 땔때 반응을 한다. 
• 누를때 반응하고 싶으면. 이것을 만들어야 한다. 마우스엔터를 해야한다. 

_02_이벤트두개추가.html

---

• _03_blur.html

_03_blur.html

---

• 🎯 전체 흐름 요약
  1. 사용자가 텍스트 입력란에 소문자를 입력함
  2. 입력 후 다른 곳을 클릭하면 blur 이벤트 발생
  3. changeUpper() 함수가 실행됨
  4. 입력한 글자가 자동으로 대문자로 변환
  5. 입력창 배경이 노란색으로 바뀜

  ---

  🧠 초보자 팁
  • "blur"는 흔히 입력 후 유효성 검사, 자동 포맷 변환, 경고 표시 등에 사용돼요.
  • 이 코드는 keyup이나 change 이벤트로도 비슷하게 응용할 수 있습니다

---

• _04_change1.html
• 포커스를 잃으면 그때 반응 

_04_change1.html

---

 

🤔 blur vs change 차이점 (비슷해 보여요!)

구분blurchange

언제 실행됨?	입력창에서 포커스가 빠질 때	입력값이 바뀌고 포커스가 빠질 때
입력값 바꾸지 않아도 실행됨?	예	❌ 값이 변경된 경우에만 실행됨
흔한 용도	입력 완료 처리, 검증	값이 바뀌었을 때만 반응해야 할 경우

---

• _05_change2.html
• 셀렉트 
• 바꾼순간 포커스를 잃은것 

_05_change2.html

---

• _06_focus.html

_06_focus.html

---

---

• _07_input1.html
• addEventListener

_07_input1.html

---

💡 초보자 팁 – input, change, blur 차이

이벤트언제 실행됨?특징

input	입력값이 바뀔 때마다 즉시	실시간 반응 (글자 1자 입력할 때마다)
change	입력 후 포커스를 잃을 때	입력이 끝났을 때 한 번만 실행
blur	포커스를 잃을 때 (값이 안 바뀌어도 됨)	입력값과 관계없이 발생

---

• _08_input2.html

_08_input2.html

---

• _09_keydown.html

_09_keydown.html

---

• 🎯 전체 요약
  • querySelector()는 HTML 요소를 찾는 함수
  • "input", "keydown", "keyup" 이벤트로 실시간 반응을 만들 수 있음
  • 이미 요소를 찾았다면, querySelector() 대신 변수로 재사용하는 게 좋음
  • 실무에서는 요소를 한 번만 찾고 최대한 변수로 저장해서 사용하는 방식을 많이 씀
• ✅ 결론:
  querySelector()는 HTML 요소를 가져오는 함수
  → 이미 가져왔다면 변수로 저장해서 쓰는 것이 더 좋다!

💼 실무에서는 언제 querySelector 써요?

• 상황설명

   

  처음 요소를 찾을 때	let input = document.querySelector("#name")
  버튼 클릭 이벤트 설정	btn.addEventListener("click", () => {})
  동적으로 요소가 추가되었을 때	새로 생긴 요소를 다시 찾아야 할 때
  특정 조건에 맞는 요소 여러 개 찾기	document.querySelectorAll(".list-item"

---

• _10_load.html
• 윈도우. 브라우저를 말한다. 
• 브라우저가 다 로드가 될때. 
• 무조건 실행시키고 싶을때. 자동으로 
• 🔥 중요 포인트:
  → "DOMContentLoaded" 이벤트와 다르게, "load"는 이미지나 CSS까지 모두 로드된 후 실행됩니다.
  → 웹 페이지가 완전히 준비된 뒤에 작업을 시작해야 할 때 꼭 사용합니다.
• 🧑‍💻 실무 팁
  • 대부분의 초기 자바스크립트 코드는 "DOMContentLoaded" 이벤트로 충분해요.
  • "load"는 이미지나 CSS 파일처럼 시간이 걸리는 리소스까지 모두 준비된 후 실행하고 싶을 때 사용합니다.
  javascript

  복사편집

_10_load.html

---

• _11_click1.html

_11_click1.html

---

• _12_click2.html

_12_click2.html

---

• _13_click3_오류발생1.html
• 인자를 못 넣는다. 인자 못넣는것 못쓴다. 
• 소괄호를 넣으면 실행이 된다. 

_13_click3_오류발생1.html

---

• _14_click4_오류발생2.html

_14_click4_오류발생2.html

---

• _15_mouse.html

_15_mouse.html

---