프론트
[jQuery] jQuery로 클릭 / hover 등의 이벤트 제어해보기
planting grass
2025. 5. 19. 18:03
728x90
jQuery란?
DOM 요소에 이벤트를 손쉽게 연결할 수 있도록 도와주는 자바스크립트 라이브러리다.
기존에 이벤트 제어를 위해서 순수하게 js만을 사용해야만 했었다.
하지만 jQeury를 사용한다면 보다 간단한 문법을 사용해 이벤트를 제어할 수 있으며, 브라우저 호환성 또한 jQuery가 내부적으로 처리해준다.
보다 자세한 내용은 jQuery란 무엇인가요?를 참고하면 될 듯하다.
참고로 jQuery는 자바스크립트의 라이브러리 즉, 기능을 보완해주는 JS 코드 집합이기 때문에 HTML내에서 스크립트 형태로 함께 사용된다.
주요 jQuery 메서드
| 메서드 | 설명 |
.click() |
클릭 이벤트 |
.hover() |
마우스를 올렸을 때 / 뗐을 때 |
.mouseenter() / .mouseleave() |
마우스 진입/이탈 시 |
.on(event, handler) |
일반적인 이벤트 바인딩 (위임 포함) |
보다 상세한 내용은 jQuery API를 참고하면 된다.
클릭 이벤트 처리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클릭 이벤트 (jQuery)</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h2>클릭 이벤트 예제</h2>
<button id="clickBtn">버튼을 클릭하세요</button>
<p id="clickResult">여기에 결과가 표시됩니다.</p>
<script>
$('#clickBtn').click(function () {
$('#clickResult').text('버튼이 클릭되었습니다!');
});
</script>
</body>
</html>
클릭 관련 이벤트
| 이벤트 이름 | 설명 |
click |
클릭 시 실행 |
dblclick |
더블클릭 시 실행 |
mousedown |
마우스 버튼 누를 때 실행 |
mouseup |
마우스 버튼 뗄 때 실행 |
contextmenu |
우클릭 시 실행 (브라우저 기본 메뉴 방지 가능) |
더 많은 이벤트들은 jQuery API를 참고하면 된다.
hover 이벤트 처리
hover란 마우스 포인터가 어떤 요소 위에 올라간 상태를 의미한다.
우리가 로그인 버튼에 마우스를 올리면 버튼이 확대되거나 색상이 변경되는 기능들도 hover의 범주에 들어간다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>hover 이벤트 (jQuery)</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#hoverBox {
width: 200px;
height: 100px;
background-color: royalblue;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<h2>hover 이벤트 예제</h2>
<div id="hoverBox">마우스를 올려보세요</div>
<script>
$('#hoverBox').hover(
function () {
$(this).css('background-color', 'green').text('Hover 중!');
},
function () {
$(this).css('background-color', 'royalblue').text('Hover 해제');
}
);
</script>
</body>
</html>hover 관련 이벤트들
| 이벤트 이름 | 설명 |
mouseenter |
마우스가 요소에 처음 들어올 때 |
mouseleave |
마우스가 요소에서 벗어날 때 |
mouseover |
요소에 마우스가 올라갈 때 (자식 포함) |
mouseout |
요소에서 마우스가 나갈 때 (자식 포함) |
더 많은 이벤트들은 jQuery API를 참고하면 된다.
728x90