[jQuery] 제이쿼리 기초 및 사용방법 part.3 이벤트 종류

예시용 코드

$("#hacs")._____(function(){
      $(this).show();
});

 

 

 

이벤트 종류

click : 클릭시 일어나는 이벤트

 

추가로

$("#hacs").on("click", function(){
    $(this).show();
});

 

이것도 동일한click 작업을 수행한다.

하지만 더 읽기 쉽고 작업하기 편한 구문을 선택해야할텐데 일반적으론 on을 사용하지 않고 바로 click이벤트를 처리하는게 더 간결하고 보기가 쉽다.

 

dblclick : 더블클릭시 일어나는 이벤트

keypress : 키보드 눌렀을 경우 일어나는 이벤트(input박스에 실험해보면 이벤트가 발생하고 키입력이 된다.)

mouseenter : 마우스 올려놨을때 일어나는 이벤트(마우스 오버느낌(미리보기볼때 이런느낀이다))

mouseleave : 마우스를 떼었을때 일어나는 이벤트

hover : 마우스를 올려놨을때 + 마우스를 떼었을때 일어나는 이벤트(mouseenter + mouseleave)

 

hover이벤트를 사용하기 위해선 위에 예시처럼 넣으면 아무일도 벌어지지 않는다 hover예시를 보여주겠다.

$("#hacstest").hover(function() {
    console.log("마우스 올려놨을때");
},
function() {
    console.log("마우스를 뗐을때");
});

 

 

hover는 마우스를 올렸을때랑 땟을때 이벤트 2가지를 동시에 수행하기에(마치 숨기기 떼기 2개를하는 toggle이벤트와 비슷)

이렇게 function을 2개 걸어줘야한다.(반드시는 아님 1개 써도 된다)

저렇게하면 결과가 마우스를 올렸을때 콘솔에 "마우스 올려놨을때"가 나오게 되고 떼었을때 "마우스를 뗐을때"가 출력되게 된다.

 

 

 

추가

TIP!

사실 아까 click할때 쓰려 했지만 hover까지 배우고 설명하는게 좋다라는 판단에 이렇게 써본다

사실 click이벤트도 hover이벤트랑 매우 유사하다.

왜냐하면 click이벤트도 mousedown + mouseup이 합친 이벤트 이기때문이다.(mousedown=마우스를 누르고있는상태, mouseup= 마우스를 뗏을경우)

고로 어렵게 생각하지말고 hover = click, mouseenter=mousedown, mouseleave=mouseup이라고 생각하면된다 (딸깍만 안누르는 차이)

 

 

 

다른 jQuery팁들도 많이 올려놨으니 궁금하신분은

아래 링크를 타고 보면 됩니다

 

 

[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after

jQuery 기초 및 사용방법 part.4 CSS vs Animate

jQuery 기초 및 사용방법 part.2 hide, show, toggle

jQuery 기초 및 사용방법 part.1 $, #, 태그?

 

 

 

학스의 개발일지

 

 

 

오류나 궁금하신점은
아래 댓글로 알려주시면 감사하겠습니다.