이벤트 리스너 만들기

1 : HTML 태그 내에 직접 작성

마우스를 클릭해 보세요
마우스를 올려 보세요.
HTML 태그 안 에 직접 작성

2 : 이벤트 리스너 프로퍼티에 등록

마우스를 올려보세요 . 클릭해보세요
이벤트리스너 프로퍼티 등록하기

3 : addEventListener() 함수를 이용한 이벤트 종료

마우스를 올려보세요 . 클릭해보세요
이벤트리스너 프로퍼티 등록하기

이벤트 객체 전달하기

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

이벤트 객체 정보 :

preventDefault()를 이용한 이벤트 디폴트 행동 취소

CRIS로 이동하기
CRIS로 이동하기(return false)
CRIS로 이동하기(event.preventDefault)
CRIS로 이동하시겠습니까?(query)

골라보기

수퍼마켓에서 주문하기
불닭
핵불닭 (불닭초심자 주의)
네넴띤 (불닭초심자 주의)

이벤트 흐름 분석

이벤트 흐름 정보 :

간단한 계산기 만들기

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

수식 :
결과 :

마우스 이벤트 리스너 !

이곳 에서 마우스를 사용해보세요.

컨텍스트 메뉴 처리

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

이미지의 onload 이벤트 처리

이미지의 onload 이벤트 처리

이미지 크기
.

이미지를 클릭하여 new Image()로 새 이미지열기

로그인

ID:
Pass:

라디오 버튼 활용하기

서울 김포 부산 파주 햄버거맛집

사용자 선택 결과 :

체크박스 활용

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

모자 10,000
구두 50,000
명풍 가방 80,000
구두 800,000
총 금액:

select 이벤트 활용

메뉴를 선택하세요

키 이벤트 리스너

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

중국집 메뉴판

주문하세요

메뉴 가격 수량 금핵
짜장면 원 개 원
짬뽕 원 개 원
양장피 원 개 원
합계   개 원