이벤트3_개념_익명함수사용법 , 이벤트4_개념_화살표함수사용법

이벤트3_개념_익명함수사용법

---

• _01_이벤트_익명함수방법.html
• 말 그대로 이름이 없다. 
• funtion 이름 없음 ( ) { } 
• 원래라면 2개인데. 편의성을 위해 합친것 

_01_이벤트_익명함수방법.html

---

• ✅ 익명 함수 vs 이름 있는 함수 (비교)
• 항목이름 있는 함수익명 함수

  작성 예	function sayHi() { alert("Hi"); }	function() { alert("Hi"); }
  사용 예	addEventListener("click", sayHi)	addEventListener("click", function() {...})
  재사용 가능?	✔ (여러 곳에서 호출 가능)	❌ (한 번 쓰고 끝)
  주로 언제 사용?	복잡하거나 여러 곳에서 쓰는 함수	짧고 한 번만 쓸 때

🔥 중요 차이점 요약

항목설명

addEventListener(...)	이벤트를 등록하는 방식 (이 자체는 이벤트 연결 도구)
익명 함수	function() { ... } 처럼 이름 없이 즉석에서 정의하는 함수
함께 쓰이는 이유	이벤트가 발생했을 때 실행할 함수를 직접 자리에 넣는 방식이 편리하기 때문

---

• _02_이벤트두개추가.html
• 익숙해지면. 버튼하고 함수를 같이 쓰면 편하다. 

 

• 마우스로 클릭하기 전에는 버튼으로만 있고. 마우스로 클릭했을때. 이벤트가 발생한다. 
• ❓ “이벤트가 발생해야지 바뀌는 느낌이니?”
  예설명

  click	클릭했을 때 실행
  mousedown	누르자마자 실행
  mouseup	마우스에서 손을 뗐을 때 실행

• ✅ 맞습니다!
  자바스크립트에서는 "이벤트가 발생해야만" 코드가 실행됩니다.

_02_이벤트두개추가.html

---

• _03_blur.html

_03_blur.html

---

• _04_change1.html

_04_change1.html

---

• _05_change2.html

_05_change2.html

---

• _06_focus.html

_06_focus.html

---

• _07_input1.html

_07_input1.html

---

• _08_input2.html

_08_input2.html

---

• _09_keydown.html

_09_keydown.html

---

• _10_load.html

_10_load.html

---

• _11_click1.html

_11_click1.html

---

• _12_click2.html

_12_click2.html

---

• _13_click3_오류발생1.html
• 인자 넣는게 안된다.
• function(min,max) 이게 안된다. 

_13_click3_오류발생1.html

---

• _14_click4_오류발생2.html
• 순간적으로 되는것처럼 보이지만 안된다. 인자 (msg) 
• 인자 되는것은 onclick만 된다. 

_14_click4_오류발생2.html

---

• _15_mouse.html

_15_mouse.html

 

---

이벤트4_개념_화살표함수사용법

---

• 🔥 핵심 차이점: this 바인딩
• 항목익명 함수화살표 함수

  this의 동작	함수가 호출될 때마다 바뀜	선언된 위치의 this를 고정함
  사용 문맥	DOM 이벤트 핸들러, 일반 함수 등	콜백, 짧은 함수에 유용함
  간결함	약간 길다	짧고 간단한 문법
  arguments 사용	사용 가능	사용 불가 (arguments 없음)

👇 예를 통해 이해해볼게요

✅ 익명 함수에서의 this

javascript

복사편집

let $btn = document.querySelector("#btn"); $btn.addEventListener("click", function () { console.log(this); // 👉 this는 버튼 요소 (<button>)를 가리킴 });

✅ 화살표 함수에서의 this

javascript

복사편집

let $btn = document.querySelector("#btn"); $btn.addEventListener("click", () => { console.log(this); // 👉 this는 window (외부 스코프)를 가리킴 });

🔥 즉, DOM 이벤트처럼 this가 그 HTML 요소를 가리켜야 하는 경우에는
➡ 익명 함수(function) 를 써야 합니다!

---

• _01_이벤트_화살표함수방법.html
• 화살표함수도 익명 함수이다. 
• function을 빼고 화살표로 바꾼거다. 
• => 이게 function이다. 

 

🔥 중요 포인트
→ 여기서 화살표 함수는 익명 함수처럼 바로 그 자리에 쓸 수 있어서 짧고 간편합니다.
→ this를 사용하지 않는 단순 이벤트 처리엔 화살표 함수가 더 깔끔해요.

_01_이벤트_화살표함수방법.html

---

• _02_이벤트두개추가.html

_02_이벤트두개추가.html

---

• _03_blur.html

_03_blur.html

---

• _04_change1.html

_04_change1.html

---

• _05_change2.html

_05_change2.html

---

• _06_focus.html

_06_focus.html

---

• _07_input1.html

_07_input1.html

---

• _08_input2.html

_08_input2.html

---

• _09_keydown.html

_09_keydown.html

---

• _10_load.html

_10_load.html

---

• _11_click1.html

_11_click1.html

---

• _12_click2.html

_12_click2.html

---

• _13_click3.html

_13_click3.html

---

• _14_click4.html

_14_click4.html

---

• _15_click5.html

_15_click5.html

---

• _16_mouse.html

_16_mouse.html

---

• 자바스크립트 특징 
• 그냥 편의 기능 계속 만듬 
• 당황하면 안됨.