이벤트(마우스)
- 속성 종류
1. $('선택자').click(function(){})
- 한번 클릭2. $('선택자').dbclick(function(){})
- 더블 클릭3. $('선택자').mousemove(function(){})
- 해당 요소 위에서 마우스 움직일 때 동작4. $('선택자').mouseover(function(){})
- 마우스가 올라갔을 때, 버블링 효과5. $('선택자').mouseout(function(){})
- 마우스가 나갔을 때, 버블링 효과-
버블링 효과란?
(부모자식관계) 두 개의 요소가 겹쳐있을 때 나타나는 현상
자식요소에 마우스 오버/아웃 이벤트가 발생했을 때, 부모요소에 다시 마우스오버/아웃 된 것 같은 효과 -
버블링 효과 막기
event.stopPropagation() 을 자식한테 주기
감싸고 있는 부모 요소의 이벤트가 반응하지 않게 함
6. $('선택자').mouseenter(function(){})
- 마우스가 올라갔을 때, 버블링효과 없음7. $('선택자').mouseleave(function(){})
- 마우스가 나갔을 때, 버블링효과 없음1 ~ 7번까지는 아래 코드로 대체 가능
$(document).on('이벤트','선택자',function(){
기존 것과 달리 나중에 js로 추가한 요소도 알아볼 수 있다.
})- 이벤트 바인딩 : 메모리적으로 좀 더 유리함
$('선택자').on({
이벤트:function(){
...
},
이벤트:function(){
...
}
})7. $('선택자').hover(function(){
// 마우스 올라갔을 때의 기능 코드
}, function (){
// 마우스 빠졌을 때의 기능 코드
}) 