이벤트 리스너 만들기
1. HTML 태그에 이벤트 리스너 작성하는 방법
마우스를 올리면 배경색이 orchid색으로 변경됩니다.
2.DOM 객체의 이벤트리스너 프로퍼티에 리스너 등록
마우스를 올리면 배경색이lightblue로 변경됩니다.
3. addEventListener()를 이용한 이벤트 등록
마우스를 올리면 배경색이 ightgrey로 변경됩니다.
4. 익명함수로 이벤트 리스너 작성
마우스를 올리면 배경색이 yellow로 변경됩니다.
이벤트 객체 전달받기
마우스를 올려보세요.
이벤트명 :
이벤트의 디폴트 행동 취소
네이버로 이동할까요?
이벤트의 흐름 - 캡처 단계, 버블단계
이것은
문장입니다.
onclick 리스너로 계산기 만들기
계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요.
마우스 관련 이벤트 리스너
마우스 관련
이벤트
가 발생합니다.
마우스 이벤트 객체의 프로퍼티와 onmousemove
이미지 위에 마우스를 움직일 때
onmousemove 리스너가 실행되고,
마우스의 위치를 보여줍니다.
oncontextmenu에서 컨텍스트 메뉴 금지
마우스 오른쪽 클릭은 금지됩니다. 아무곳이나
클릭해도 컨텍스트 메뉴를 볼 수 없습니다.
image-onload 테스트
onclick 이미지 변경하기
new Image()로 이미지 로딩
이미지를 클릭하면 다음 이미지를 보여줍니다.
onfocus, onblur 이벤트
경고창 :
라디오버튼 입력 활용하기
목적지를 입력하세요
목적지 :
체크박스 활용
구매할 물품을 선택하세요.
select객체 활용
구매할 차량을 선택하세요.
키 이벤트 활용
입력창에 키를 눌러보세요.