1. HTML 태그에 이벤트 리스너 설정

마우스 올리면 배경색이 바뀝니다..
HTML 태그에 이벤트 리스너 작성

2. 이벤트 리스너 프로퍼티에 함수 연결

이벤트 리스너 프로퍼티에 함수를 연결하는 방법... 마우스를 올리면 배결색이 바뀝니다.

3. addEventListener() 함수를 이용한 이벤트 등록

마우스를 올리면 배경색이 바뀝니다.
addEventListener() 함수를 이용하여 이벤트 등록

이벤트 객체 전달

마우스를 올려보세요
클릭해보세요
더블클릭해보세요

이벤트 객체 정보 표시

이벤트의 디폴트 행동 취소 preventDefault() 함수 이용

홈페이지로 이동하시겠습니까? preventDefault()

술(19세미만 금지)
홈페이지로 이동하시겠습니까?

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

이것은 문장입니다.


간단한 계산기 만들기

계산하고자 하는 수식을 입력하고 계산 버튼을 누르세요.

수식 :
결과 :

마우스 이벤트 리스너

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

onmousemove 이벤트

그림위에 마우스를 움직여보세요...

컨텍스트 메뉴 금지

마우스 오른쪽 버튼 클릭 금지

이미지의 onload 이벤트 처리

이미지를 선택하세요

이미지 정보표시

newImage() 로 이미지 로딩하기

.

onfocus, onblur

입력이 없으면 에러메세지를 보여줍니다.
이름

학번

라디오버튼 활용

서울 부산 대전 고양 파주

결과

체크박스 활용

물품을 선택하면 금액이 자동 계산됩니다.

모자 : 1만원
코트 : 8만원
바지 : 3만원
반지 : 5만5천원
지불하실 금액 :

Select 요소 활용

그림을 선택하면 이미지가 출력됩니다.

키 이벤트 리스너

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

학교식당 메뉴판

주문하세요.....

메뉴 가격 수량 합계
짜장면