2021-12-24 수업내용

(1) 자바스크립트의 이벤트

1) 리스너

https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/javascript/ex06

exam 01-1.html ~ exam 01-4.html 참고

• js에서 객체에 저장하는 key들을 보통 변수라 안하고 프로퍼티라 한다.

• onclick : 프로퍼티 이름 , click : 이벤트 이름

2) 이벤트 정보 다루기

https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/javascript/ex06

exam 02-1.html ~ exam 02-4.html 참고

• 마우스 이벤트 좌표 정보

3) 이벤트가 발생된 태그 알아내기

https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/javascript/ex06

exam 03-1.html ~ exam 03-3.html 참고

• 함수뒤에 ()가 없으면 함수 주소를 가져오란 의미이고, - 함수뒤에 () 있으면 함수를 호출하란 의미이다.

4) 이벤트 전파

https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/javascript/ex06

exam 04-1.html ~ exam 04-4.html 참고

• 이벤트 발생과 전달과정
  

5) 이벤트 발생

https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/javascript/ex06

exam 05-1.html ~ exam 05-4.html 참고

6) 이벤트 중단 및 데이터 검증

https://github.com/InfraWhale/bitcamp-Study/tree/main/web/app/src/main/resources/static/javascript/ex06

exam 06-1.html ~ exam 06-3.html 참고