1. 마우스 관련 event
1) click
<HTML>
<CSS>
<화면>
(1) doc 변수에 document 넣기
(2) 두 태그 선택하기
(3) addEventListner('click',function(){})..
↓ 클릭하면 popup창이 뜬다
- 클릭하면 배경색이 바뀌는 동작
↓클릭하면 바뀜
-두개의 박스 모두 click 할 때 동작하기
2) mouseover & mouseout
: 마우스를 올렸을때와 마우스를 내렸을 때. 같이쓰면 CSS hover와 같은 효과를 준다
<HTML>
<CSS>
<화면>
(1) 변수에 .nemo 넣기
(2) mouseover, mouseout
color라는 class 추가, 삭제
*class color는 CSS 에서 이러한 속성이 적용되어 있다. *
- 마우스를 올리면 class를 추가한다
- 마우스를 내리면 class를 삭제한다.
* 더 다양한 이벤트 : https://www.w3schools.com/js/js_events_examples.asp
'프론트엔드 > JavaScript' 카테고리의 다른 글
| <JS> 유저의 행위(event) (3) 스크롤 (0) | 2017.08.11 |
|---|---|
| <JS> 유저의 행위(event) (2) 키보드 (0) | 2017.08.11 |
| <JS> DOM제어 예제1. 버튼 마다 다른함수 주기 (0) | 2017.08.10 |
| <JS> DOM제어하기(2) 자식태그, 부모태그, 형제태그 (0) | 2017.08.10 |
| <JS>DOM 제어하기(1) (0) | 2017.08.10 |