이벤트 리스너 만들기

1. HTML 태그에 이벤트 리스너 작성하는 방법
마우스를 올리면 배경색이 orchid 색으로 변경 됩니다

2. DOM 객체의 이벤트리스너 프로퍼티에 이벤트리스너 등록하기
마우스를 올리면 배경색이 lightblue 색으로 변경 됩니다

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

4. 익명 함수로 이벤트리스너 등록하기
마우스를 올리면 배경색이 yellow 색으로 변경 됩니다

이벤트 객체 전달받기

마우스를 올려보세요.

이벤트명 :

이벤트의 디폴트 행동 취소하기

네이버로 이동할까요?
빵 (체크 가능)
술 (체크 안 됨)
마리화나 (체크 금지)

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

onclick 리스너로 계산기 만들기

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

식
값

마우스 관련 리스너

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




마우스 이벤트 객체의 프로퍼티와 onmousemove

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



oncontextmenu

oncontextmenu에서 컨텍스트 메뉴 금지

마우스 오른쪽 클릭은 금지됩니다. 아무곳이나 클릭해도 컨텍스트 메뉴를 볼 수 없습니다.
김치찌개

onload로 이미지 크기 출력

이미지 크기

.

new Image()로 이미지 로딩

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

.

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

이름 :
학번 :

라디오버튼 활용

목적지가 어디입니까?

서울 부산 춘천 대전 고양

체크박스 활용

구매할 물품을 선택하세요. 지불할 금액이 자동 계산됩니다.

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

서적 주문

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

Select 객체 활용

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


키 이벤트 활용

입력 창에 키를 눌러 보세요.