이벤트 리스너 작성 방법

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

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

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

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

4. 익명 함수로 이벤트 리스너 등록
마우스를 올리면 배경색이 pink로 바뀝니다.

이벤트로 객체 전달하기

마우스를 올려보세요

이번트명:

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

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

이벤트의 디폴트 행동 취소

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

이벤트의 흐름, 캐버단계, 버블단계


onclick 리스너로 계산기 만들기


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



마우스 관련 이벤트리스너

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

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


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

image onload 테스트

이미지 크기

.

onclick 이미지 변경하기

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

.

사용자 입력 여부 체크

이름 :

학번 :

라디오 버튼 활용

서울 부산 춘천 고양

체크박스 활용

구매할 물건으 고르세요.

모자 1만원
구두 3만원
명품가방 8만원
노트북 120만원
스마트폰 108만원
지불하실 금액

select 객체 활용

보고 싶은 사진을 선택하시오


키보드 이벤트 활용

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