1. HTML 태그에 이벤트 리스너 작성
마우스 접촉시 배경색 변경
(HTML태그 이용)
2. 이벤트 리스너 프로퍼티에 함수 연결
마우스 접촉시 배경색 변경
(스크립트 이용)
3. addEventListener() 함수를 이용한 이벤트 등록
마우스 접촉시 배경색 변경
addEventListener() 함수를 이용하여 이벤트 등록
4. 이벤트 객체 전달
접촉
클릭
더블클릭
이벤트 객체 정보 표시
5. 이벤트의 디폴트 행동 취소 preventDefault() 함수이용
홈페이지 이동
CRIS 홈페이지로 이동하기
6. 이벤트의 흐름(캡쳐단계, 버블단계)
이하생략
간단한 계산기 만들기
계산하고자 하는 수식을 입력하고 계산 버튼을 누르세요.
7. 마우스 이벤트 리스너
마우스 관련
이벤트
가 발생합니다.
8. onmousemove 이벤트
그림 위에 마우스를 움직여 보세요.......
9. 컨텍스로 메뉴 금지
마우스 오른쪽 버튼 클릭 금지
10. 이미지의 onload 이벤트 처리
이미지를 선택하세요
11. new Image()로 이미지 로딩하기
이미지를 클릭하면 다음 이미지를 보여줍니다
12. onfocus, onblur
입력이 없으면 에러메시지를 보여줍니다
13. 라이오버튼 활용
14. 체크박스 활용
물품을 선택하면 금액이 자동 계산됩니다...
15. Select 요소 활용
과일을 선택하면 이미지가 출력됩니다.
16. 키 이벤트 리스너
텍스트 장애 키를 눌러보세요. Alt, Shift, Ctrl 키도 가능합니다.