이벤트 리스너 작성 방법

1. HTML 태그에 작성하는 방법
마우스를 올리면 배경색이 바뀝니다.

2. 이벤트 리스너 등록
마우스를 올리면 배경색이 lightblue로 바뀝니다.

3. addEventListener를 이용한 이벤트 리스너 등록
마우스를 올리면 배경색이 lightgreen로 바뀝니다.

이벤트 객체 전달하기

마우스를 올려보세요.

이벤트명:

이벤트 객체의 프로퍼티 출력

버튼을 클릭하면 이벤트 객체를 출력합니다.

이벤트의 디폴트 행동 취소

네이버로 이동할까요?
빵(체크 가능)
술(체크 안됨)

이벤트의 흐름, 캡처 단계, 버블단계

onclick, 계산기 만들기

계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요.

식
값

마우스 관련 이벤트 리스너 활용

마우스 이벤트 발생

onmousemove 이벤트 활용

이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고, 마우스의 위치를 보여줍니다.

onload 로 이미지 크기 표시하기

이미지 크기

.

이미지를 클릭하면 다음 이미지를 보여줍니다.

.

사용자 입력 여부 체크 - onblur 이벤트 이용

이름 :
학번 :

라디오버튼 활용

목적지는 어디 입니까?

서울 부산 춘천 대전 고양

체크박스 활용

구매할 물건을 고르세요.

모자 1만원 구두 3만원 노트북 50만원 제주도 여행권 20만원 명품가방 8만원
지불하실 금액

서적 주문

책 제목 가격 수량 합계
HTML5 배움터 원 원
CSS3 완전정복 원 원
자바스크립트를 잡아라 원 원
합계   원

Select 객체 활용

먹고 싶은 메뉴를 선택하세요...


키보드 이벤트 활용

텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.