1. 마우스 이벤트
1-1. 마우스 다운, 클릭하기
<script>
$(document).ready(function () {
// 마우스 버튼을 누르고 있는 상태
$(".logo").mousedown(function () {
console.log("logo image mousedown");
});
// 마우스 버튼을 누르고 뗀 상태 (클릭)
$(".logo").click(function () {
console.log("logo image click");
});
});
</script>- 다양한 마우스 이벤트
<!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://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#eDiv").dblclick(function () {
console.log("dblclick event!");
});
$("#eDiv").mousedown(function () {
console.log("mousedown event!");
});
$("#eDiv").mouseup(function () {
console.log("mouseup event!");
});
$("#eDiv").mousemove(function () {
console.log("mousemove event!");
});
$("#eDiv").mouseover(function () {
console.log("mouseover event!");
});
$("#eDiv").mouseout(function () {
console.log("mouseout event!");
});
$("#eDiv").mouseenter(function () {
console.log("mouseenter event!");
});
$("#eDiv").mouseleave(function () {
console.log("mouseleave event!");
});
});
</script>
<style>
#eDiv {
width: 100px;
height: 100px;
background: #ff0000;
line-height: 100px;
text-align: center;
color: #ffffff;
font-weight: bolder;
margin: 20px;
}
</style>
</head>
<body>
<div id="eDiv">jQuery event</div>
</body>
</html>- 명시적 함수 선언
$(document).ready(function () {
$(".logo").click(imgClickEventListener);
function imgClickEventListener() {
console.log("function imgClickEventListener()");
console.log("logo image click~");
}
});1-2. 클릭하면 박스가 생성
2. 폼 이벤트
2-1. 폼 이벤트 만들기
2-2. event.preventDefault();
- 기본적인 동작 막기
3. 제이쿼리 연습문제
3-1. 버튼을 누르면 더하기 연산
3-2. 가격의 input과 select의 option항목이 바뀌면 가격의 총합 구하기
3-3. 버튼을 누르면 체크박스에 체크된 것만 더해서 총합 구하기
3-4. 리스트 생성하기
3-5. 리스트 추가, 삭제
4. 동적 처리 이벤트
4-1. 복제 오류 잡기
- 첫번째 상자를 누르면 복제가 되지만, 다른 상자는 복제되지 않는다.
- 한번 메모리에 올리긴 했으나, 태그 복제는 되지만 event의 복제는 이루어지지 않았다.
4-2. 동적 처리를 실행하는 방법
- clone(this), clone(true) 처럼 객체를 잡고 클론한다. (클론할 때만 사용 가능하다)
- $(document).on("click", "#id", function(){}) 처럼 눌렀을 때 동적 처리를 모두 잡을 수 있도록 설정한다.
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.