자바스크립트 기초 - part 3 (2024. 5. 8.)

0. 기본정보

#스파르타코딩클럽 #부트캠프 #17일/94일
- 학습주제: 자바스크립트 기초 (강의 출처: youtube 입문자를 위한 자바스크립트 기초 by 유노코딩)

- 학습내용: addEventListener

- 특별사항: JS 개인과제 CSS : grid
- 학습일: 2024. 5. 8.

---

2. 배운 내용 요약

1) addEventLiistener - 실습 내용 참고★

• 본 메소드를 활용해 이벤트 핸들러 등록
• 장점 : 1) 이전에 추가한 이벤트 핸들fj를 제거할 수 있는 대응 메소드 존재 - removeEventListener
            2) 같은 리스너(target)에 대해 다수의 핸들러 등록 가능 - btn1, btn2, btn3 동일한 핸들러 사용(=적용) 가능
            3) 추가적인 옵션 사항들 제공 - addEventListener 추가
• 이벤트 발생 시에 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데, 이때 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을 수 있음 - console.log(event.targer)

실습 내용✍️

btn2에 addEventListener 생성

 

btn2에 addEventListener 추가

 

btn2에 addEventListener 삭제 (removeEventListener)

 

콜백함수 handleClick 에서  btn2의  event 확인

 

콜백함수 handleClick 에서  btn2의 event.target 확인

 

콜백함수 handleClick 에서  btn1~btn3의 event.target 확인

---

3. 오늘의 회고

- 칭찬: 지루해도 끝까지 자리를 지킨 것

- 반성: 카메라를 켜고 공부했다면 더 열심히 공부했을텐데 귀찮아서 카메라를 꺼놓은 것

- 보충: JS 개인과제 - 영화 검색 기능 구현, form 클릭 시 이벤트 발생