마우스 이벤트 종류
- click : 마우스를 클릭할 때 발생
- dbclick : 마우스를 더블 클릭할 때 발생
- mousedown : 마우스 버튼을 누를 때 발생
- mouseup : 마우스 버튼을 뗄 때 발생
- mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
- mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
- mousemove : 마우스가 움직일 때 발생
- mouseout : 마우스가 요소를 벗어날 때 발생
- mouseover : 마우스를 요소 안에 들여올 때 발생
<body>
<style>
.outer {
width: 200px;
height: 200px;
background: orange;
padding: 50px;
margin: 10px;
}
.inner {
width: 100%;
height: 100%;
background: red;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
</body>
$(function () {
$('.outer').mouseover(function () {
$('body').append('<h1>MOUSEOVER</h1>');
}).mouseenter(function () {
$('body').append('<h1>MOUSEENTER</h1>');
});
})
코드를 실행의 규칙을 보면 mouseover 이벤트는 이벤트 버블링을 적용한다
따라서 내부의 div 태그 안에 들어가도 이벤트를 발생시킨다
반면에 mouseenter 이벤트는 마우스가 문서 객체의 안에 있는지 외부에 있는지만 확인한다
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 30) - 윈도우 이벤트 (0) | 2020.08.12 |
|---|---|
| JS jQuery (part. 29) - 키보드 이벤트 (0) | 2020.08.12 |
| JS jQuery (part. 27) - 이벤트 연결 범위 한정 (0) | 2020.08.11 |
| JS jQuery (part. 26) - 기본 이벤트와 이벤트 전달 (0) | 2020.08.10 |
| JS jQuery (part. 25) - 이벤트 강제 발생 (0) | 2020.08.10 |
