09009
[JQuery] 이벤트 본문
이벤트 연결
// 이벤트를 연결합니다.
$(document).ready(function() {
});ready() : 이벤트 연결 메서드, ready() 메서드를 사용하면 ready 이벤트가 연결된다.
간단한 방식으로 이벤트를 연결할 때는 아래와 같은 코드를 사용한다.
$(selector).method(function (event) { });
간단한 이벤트 연결 메서드: focus, focusin, focusout, load, scroll, click, mouseenter, mouseleave ... 등
click 이벤트 연결
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function() {
// 이벤트를 연결합니다.
$('h1').click(function () {
alert('클릭!');
});
});
</script>
</head>
<body>
<h1>click</h1>
</body>
</html>💻 출력
hover() 메서드
jquery 라이브러리는 mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결하는 hover()라는 이벤트 연결
메서드를 제공한다.
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function() {
// 이벤트를 연결합니다.
$('h1').hover(function () {
// 색상을 변경합니다.
$(this).css({
background: 'red',
color: 'white'
});
}, function() {
// 색상을 제거합니다.
$(this).css({
background:'',
color:''
});
});
});
</script>
</head>
<body>
<h1>클릭하세요</h1>
</body>
</html>💻 출력
이벤트 사용
jquery 라이브러리로 일반 이벤트를 연결할 때 on() 메서드를 사용한다.
이벤트를 제거할 때 off() 메서드를 사용한다.
| on() | 이벤트 연결 |
| off() | 이벤트 제거 |
on() 메서드는 아래 두 가지 방법으로 이벤트를 연결한다.
일반 이벤트 연결
위의 1번 방법으로 이벤트를 연결할 때 (메서드 체이닝 사용)
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
// 스타일 변경 및 이벤트 연결
$('#box').css({
width: 100,
height: 100,
background: 'orange'
}).on('click', function() {
$(this).css('background', 'red');
}).on('mouseenter', function() {
$(this).css('background', 'blue');
}).on('mouseleave', function() {
$(this).css('background', 'orange');
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>💻 출력
2번 방법으로 이벤트를 연결할 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
// 스타일 변경 및 이벤트 연결
$('#box').css({
width: 100,
height: 100,
background: 'orange'
}).on({
click: function() {
$(this).css('background','red');
},
mouseenter: function() {
$(this).css('background','blue');
},
mouseleave: function() {
$(this).css('background','orange');
}
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
jquery 라이브러리를 이용하면 모든 웹 브라우저에서 같은 방법으로 이벤트 객체 사용 가능
jquery 라이브러리는 아래 코드와 같이 이벤트 리스너의 매개변수를 사용하여 이벤트 객체를 전달한다.
preventDefault() 메서드
문서 객체의 기본 이벤트를 제거한다.
ex) 회원가입 페이지에서 사용자가 정보를 정확히 입력하였는지 확인 후 페이지를 이동하려고
기본 이벤트를 제거하는 상황에서 사용된다.
기본 이벤트 제거
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
$('a').click(function(event) {
alert('click');
// 기본 이벤트를 제거합니다.
event.preventDefault();
}).
});
</script>
</head>
<body>
<a href="http://www.youtube.com">유튜브</a>
</body>
</html>
💻 출력
링크를 클릭하면 'click' 이라는 경고 창이 출력되지만 a 태그의 기본 이벤트를 제거하였으므로 페이지는 이동하지 않는다.
실습 예제
다음 빈칸을 채워서 마우스가 올라갈 때는 반투명해지고 마우스가 내려갈 때 불투명해지는 버튼을 만드시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div>버튼</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
</script>
<style>
div {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: teal;
border-radius: 20px;
}
</style>
</head>
<body>
</body>
</html>
정답 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div>버튼</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
$('div').hover(function() {
$(this).css('opacity', 0.5);
}, function() {
$(this).css('opacity', 1);
});
});
</script>
<style>
div {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: teal;
border-radius: 20px;
}
</style>
</head>
<body>
</body>
</html>'Front-End > JQuery' 카테고리의 다른 글
| [JQuery] 무한 스크롤 (0) | 2023.04.04 |
|---|---|
| [JQuery] 문서 객체 생성과 추가 (0) | 2023.04.04 |
| [JQuery] 시각 효과 (0) | 2023.04.04 |
| [JQuery] 문서 객체 조작 (0) | 2023.04.03 |
| [JQuery] 문서 객체 선택 (0) | 2023.04.03 |
Comments