JQuery 기본 문법과 구성요소(마우스이벤트)

이벤트(Event)

 

JQuery는 사용자가 웹 페이지와 상호작용하는 것에 대한 응답을 쉽게 만드는 역할을 한다. 사용자가 웹 문서의 클릭, 스크롤, 마우스를 올리는 등의 행위에 대해 특정한 동작이 되도록 만들어 줄 수 있다.(이벤트 핸들링)

 

 

마우스 이벤트

사용자가 마우스와 관련된 기능을 작동시켰을 때 생성되는 이벤트 객체

 

.click()

마우스를 클릭했을 때 발생되는 이벤트 함수

파라미터: 콜백함수를 전달받음

반환: 이벤트 클릭에 호출된 함수가 생성한 응답을 반환

 

click 이벤트는 사용자가 클릭한 곳에 대한 정보를 ID로 식별하여 본문 내부에 정의된 함수를 호출

 

예제)

 

브라우저로 실행 후 "클릭하세요" 부분을 클릭

위와 같이 id가 #clicked 인 요소에 마우스 클릭 이벤트 발생 시 해당 기능이 동작된다.

 

.dblclick()

더블클릭 시 발생되는 이벤트

.click()과 동일하게 사용한다.

앞의 예제에 더블클릭 이벤트 핸들러를 추가하여 확인한다.

 

예제)

 

실행하고 요소를 더블클릭한 결과

 

다음 이벤트들도 동일한 방법으로 확인

 

.hover()

요소에 마우스가 올라가면 발생되는 이벤트

 

예제코드)

 

실행결과

 

.mousedown()

마우스 좌클릭 또는 특정 텍스트 하이라이트 처리 시 발생

 

예제코드)

실행 결과

 

.mouseenter()

요소에 마우스가 들어가면 한 번만 발생(상속 안 됨)

.mouseleave()

요소에서 마우스가 나오면 발생(상속 안 됨)

 

위 두 가지 함수 사용 예제코드)

 

실행 후 마우스를 div요소에 올리고 내리고 하여 동작확인

 

 

.mousemove()

요소에서 마우스가 움직이면 발생

예제코드)

 

실행결과

 

 

.mouseout()

마우스가 지정된 요소의 경계를 벗어날 때 발생(상속됨)

 

예제코드)

 

실행결과

 

.mouseover()

지정된 요소에 마우스가 올라가면 발생(상속)

예제코드)

 

실행결과

 

.toggle()

반복되는 클릭에 의해 실행되는 다중 핸들러를 바인딩하기 위해 사용

hide(), slow() 함수를 대체할 수 있다.

 

파라미터:

효과의 지속시간(duration)

효과의 진행시간(easing)

콜백함수

 

지속시간 선택인자. 숨김 및 나타남 속도를 명시(fast, slow, 밀리초, 기본값 400ms)

진행시간 선택인자. 애니메이션에 사용되는 easing()함수를 명시(기본값 string)

콜백함수는 매칭된 요소에 대한 애니메이션 효과가 끝날 때 마다 실행될 함수를 지정

 

 

예제코드)

 

 

실행결과(토글 버튼을 클릭하면 나타내거나 사라지도록 동작)

콜백함수는 끝날 때마다 항상 실행됨

시간을 조절하여 테스트도 해본다.

나타나는 중

 

콜백함수 실행

 

여기까지 정리하고 각각 요소들을 변경하고 함수의 동작을 정의하여 마음껏 테스트 해보도록 한다.