1.html 태그에 이벤트 리스너 작성
마우스를 올리면 배경색이 바뀝니다.
2. 이벤트 리스너 프로퍼티에 함수 등록
3.addEventListener() 함수를 이용한 이벤트 등록
마우스를 올리면 배경색이 바뀝니다.
addEventLISTENER()함수를 이용하여 이벤트 등록
이벤트 객체 전달
마우스를 올려보세여
클릭해보세요
더블클릭해보세요
이벤트 객체 정보 표시
마우스 관련 이벤트 리스너
마우스 관련
이벤트 가 발생합니다.
onclick, 계산기 만들기
계산하고자 하는 수식을
입력하고 계산 버튼을 눌러봐요.’
마우스 이벤트 객체의 프로퍼티와 onmousemove
이미지 위에 마우스를 움직일 때
onmousemove 리스너가 실행되고,
마우스의 위치를 보여줍니다.
컨택스트 메뉴 금지
oncontextmenu에서 컨텍스트 메뉴 금지
마우스 오른쪽 클릭은 금지됩니다. 아무곳이나
클릭해도 컨텍스트 메뉴를 볼 수 없습니다.
select 객체에서 선택한 과일 출력
과일을 선택하면 이미지가 출력됩니다.
new Image()로 이미지 로딩
이미지를 클릭하면 다음 이미지를 보여줍니다.
라디오 버튼 활용
체크박스 활용
물품을 선택하면 금액이 자동 계산됩니다
select 요소 활용
과일을 선택하면 이미지가 출력됩니다
키 이벤트 리스너
텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.