이벤트 리스너 만들기

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

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

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

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

이벤트 객체 전달받기

마우스를 올려보세요.

이벤트명:

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

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

onclick 계산기 만들기

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

마우스 관련 이벤트리스너

onmousemove 이벤트 활용

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

image onload 테스트

onfocus, onblur 이벤트

경고창:

라디오버튼 입력 활용하기

목적지를 입력하시오...

목적지:

체크박스 활용

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

서적 주문

select 객체 활용

구매할 차량을 선택하세요

키 이벤트 활용

입력창에 키를 눌러보세요