Front/jQuery
jQuery - 이벤트(마우스 이벤트, 동적 이벤트)
by Hyeon_
2021. 12. 14.
이벤트 유형
- 윈도우 이벤트
- 입력 양식 이벤트
- 마우스 이벤트
- 키보드 이벤트
마우스 이벤트
마우스 이벤트 종류
click : 마우스를 클릭했을 때 발생
dbclick : 마우스를 더블 클릭했을 대 발생
mousedown : 마우스 버튼을 누를 때 발생
mouseup : 마우스 버튼을 뗄 때 발생
mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
mousemove : 마우스를 움직일 때 발생
mouseout : 마우스가 요소를 벗어날 때 발생
mouseover : 마우스가 요소 안에 들어올 때 발생
hover : 마우스를 over 했을 때, out 했을 때 발생
contextmenu : 마우스 오른쪽 버튼을 클릭했을 때 발생
마우스 이벤트 예제
(1) .on(이벤트1).on(이벤트2)
mouseEvent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 버튼 클릭했을 때
$('#btn').on('click', function(){
alert("클릭했습니다.");
});
// 2개의 이벤트 처리
// 방법 1
$('#btn')
.on('mouseover', function(){
$(this).css('background', 'yellow');
})
.on('mouseout', function(){
$(this).css('background', "");
}); // button on 종료
});
</script>
</head>
<body>
<input type="button" value="클릭하세요" id="btn">
</body>
</html>
(2) .on({이벤트1, 이벤트2})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 버튼 클릭했을 때
$('#btn').on('click', function(){
alert("클릭했습니다.");
});
// 방법2
$('#btn').on({
mouseover:function(){
$(this).css('background', 'pink');
},
mouseout:function() {
$(this).css('background', 'skyblue');
}
});
});
</script>
</head>
<body>
<input type="button" value="클릭하세요" id="btn">
</body>
</html>
동적 이벤트 예제
dynamicEvent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// createBtn 클릭했을 때 새 버튼 2개 생성
$('#createBtn').on('click', function(){
$(this).after("<p><button id='newBtn1'>새 버튼1</button></p>" +
"<p><button id='newBtn2'>새 버튼2</button></p>");
});
// 정적 이벤트 연결 방식으로 이벤트 처리
// 새로 생성된 요소에 이벤트 등록되지 않음 : 클릭해도 이벤트 처리 X
$('#newBtn1').on('click', function(){
alert("[새 버튼1]을 클릭했습니다"); // 반응하지 않음
});
// 동적 이벤ㅌ트 연결 방식으로 이벤트 처리
$(document).on('click', '#newBtn2', function(){
alert("[새 버튼2]를 클릭했습니다");
});
});
</script>
</head>
<body>
<button id="createBtn">새 버튼 만들기</button>
</body>
</html>