HTML 태그에 이벤트 리스터 작성

마우스를 올리면 배경색이 바뀝니다...

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

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

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

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

익명 함수를 이용한 이벤트 리스너 설정

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

addEventListener() 함수를 이용한 이벤트 등록(익명함수 이용)

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

이벤트 객체 전달

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

이벤트 객체 정보 표시

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

CRIS 홈페이지로 이동하시겠습니까? / preventDefault 사용

CRIS 홈페이지로 이동하시겠습니까? / query 함수 사용

담배(19세 이하 클릭 불가)

이것은 문장입니다.


간단한 계산기 만들기

마우스 이벤트 리스너

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

onmousemove 이벤트

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

컨텍스트 메뉴 출력 금지

오른쪽 마우스 클릭 금지

이미지 정보 표시

new Image()로 이미지 로딩


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

.

이름

학번

라디오 버튼 활용

서울 부산 대전 고양 파주

결과 :

체크박스 활용

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

모자 : 1만원 구두 : 3만원 가방 : 8만원 노트북 : 100만원
지불하실 금액 :

Select 요소 활용


과일을 선택하면 이미지가 출력됩니다.

키 이벤트 리스너

텍스트 창에 키를 눌러보세요, Alt 등의 특수키도 됩니다.

서적 주문

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