이벤트 리스너 만들기

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

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

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

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

이벤트로 객체 전달 받기

마우스를 올려보세요

클릭하세요

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

네이버로 이동할까요?

빵 (체크가능)
술 (체크 안됨)
마리화나 (체크 금지)

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

이것은 문장입니다.

---

onclick, 계산기 만들기

---

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

식
값

마우스 관련 이벤트 리스너

---

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

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

---

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

new Image()로 이미지 로딩

---

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

onfocus와 onblur

---

이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.

이름

학번

버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.

---

서울 부산 춘천

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

---

모자 1만원 구두 3만원 명품가방 8만원
크루즈 여행
지불하실 금액

---

자동차를 선택하면 이미지가 출력됩니다.

그랜져 벤츠 테슬라

키 리스너와 키 이벤트 객체의 프로퍼티

---

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