이벤트리스너 만들기

1.HTML 태그 내에 직접 작성

마우스를 올려 보세요
-HTML 태그 내에 직접 작성 하기

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

마우스를 올려 보던지요. 클릭도 해보던지요.
- 이벤트리스너 프로퍼디 등록하기

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

3. 마우스를 올려보세요. 클릭도 하셔유 참쉽쥬?
- addEventListener() 함수이용

이벤트 객체 전달 하기

마우스를 올려보세요오오오오옹오오오오오오옹.
클릭도 하세요요오오오오오옹오오ㅗㅇ오ㅗ옹.


이벤트 객체 정보 :

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

Adidas 로 이동하기
nike로 이동하기 (return false:힝! 속았지?)
Adidas 로 이동하기(preventDefault:힝! 속았지?)
Adidas 로 이동하기
나이키 오프화이트 더텐 주문하기
에어조던 1
에어 프레스토 (OUT OF STOCK)
베이퍼맥스 OG
줌플라이

이벤트 흐름 분석하기

이벤트 흐름 정보 :

onclick 계산기 만들기

계산하고싶은 수식을 입력하고 계산하기 버튼을 입력하시오.

수식 :
결과:

마우스 이벤트 리스너

마우스 이벤트 테스트를 위해 이곳에서 마우스를 사용해 보세요오오오오오오오옹

컨텍스트 메뉴 처리

이 사진은 오른쪽 마우스 버튼이 클릭되지 않습니다 ㅅㄱ

이미지의 onload 이벤트 처리

이미지 크기

이미지를 클릭하여 새 이미지 열기

로그인

ID:
Pass:

라디오 버튼 활용하기

이지 오프화이트 피오갓

사용자 선택 결과 :

체크박스 활용

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

이지 하이퍼스페이스 42만원
피오갓 레이드 28만원
발렌시아가 트랙 89만원
발렌시아가 트리플s 105만원
총금액:

Select 이벤트 활용

오늘 신고나갈 신발을 고르세요 (현실도 이랫으면)

키 이벤트 리스너

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

신발 오더

장바구니

이름 가격 수량 금액
Yeezy
Balenciaga
Nike-OFF-White