상세 컨텐츠

본문 제목

jQuery :: 5 -3. 마우스 이벤트 예제

jQuery

by 비오스터딩 2020. 5. 27. 15:21

본문

 

 

 

  click   

  dbclick   

  hover  

 

버튼1을 클릭했을 때, 텍스트1의 배경색이 변함.

(preventDefault 속성을 사용하여 a의 링크 이벤트 사용중지.)

 

버튼2를 더블클릭했을 때, 텍스트2의 배경색이 변함.

 

버튼3에 마우스 포인터를 가져갔을 때, 텍스트3의 배경색이 변함.

버튼3 밖으로 포인터를 가져가는 경우, 텍스트3의 배경색이 다시 원래색으로 돌아감.

 

 

 

  mouseout  

  mouseleave  

 

내용1에서 마우스포인터가 벗어나면 배경이 노란색으로 변함.

내용4를 포함한 범위에서 마우스포인터가 벗어나면 배경이 분홍색으로 변함.

 

 

 

  mousemove  

 

 

화면에서 마우스 포인터의 위치에 따라 값이 변함.

 

 

 

 

  scroll  

 

스크롤의 위치에 따라 값이 변함.

 

 

 

 

 

반응형

관련글 더보기

댓글 영역