웹 프로그래밍 실습

이벤트 리스너 작성 방법

1.HTML 태그에 작성하는 방법.

2. 이벤트 리스너 등록

3.addEventListener를 이용한 이벤트 리스너 등록



이벤트 객체 전달하기

마우스를 올려보세요.

이벤트명 :




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

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




이벤트의 디폴트 행동 취소

네이버
빵 (체크 가능)
술 (체크 안됨)



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


onclick 리스너로 계산기 만들기

게산하고자 하는 수식을 입력하고 게산 버튼을 눌러라.




마우스 관련 이벤트 리스너

마우스 관련 이벤트가 발생합니다.

onmousemove 이벤트 활용

이미지 위에 마우스르 움직일때 리스너가 실행되고,


image onload 테스트

이미지 크기

.


onclick 이미지 변경하기

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

.


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

이름 :
학번 :


라디오버튼 활용

목적지가 어디입니까?

서울 부산 춘천


체크박스 활용

구매할 물건을 고르시오.

모자 1만원 구두 3만원 명품가방 8만원
지불하실 금액

서적 주문

서적 주문

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


Select 객체 활용

먹고싶은 과일을 선택하세요.