위로
아래
이벤트
이벤트 : 사이트에서 방문자가 취하는 모든 행위
이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 코드
이벤트 소스 : 이벤트가 발생되는 애
키보드와 마우스를 둘 다 고려하는 게 좋다
마우스 이벤트 종류 : mouseover, mouseout
키보드 이벤트 종류 : focus, blur
이벤트 메서드 등록
기본형
//단독 이벤트 등록 메서드
$("button").click(function(){
$("button").css("color","#f00")
});
//on 이용 단독 이벤트 등록 메서드
$("button").on("mouserover", function(){
console.log("welcome");
})
//on 이용 단독 이벤트 등록 메서드2
$("button").on({
"mouseover focus" : function(){
console.log("welcome");
}
})
//그룹 이벤트 등록 메서드
$("button").on({
"mouseover focus" : function(){
$("button").css("color","#f00)
},
"mouseout blur" : function(){
$("button").css("color","#00f")
}
})
// if문처럼 hover되면 a, hover 안 되면 b 나오게
$(".btn2").hover(function(){
$(".txt2").css({"background-color":"aqua"});
}, function(){
$(".txt2").css({"background":"none"});
});
});
목록
// 로딩 이벤트
load() // 로딩이 완료된 후 이벤트 발생
ready() // 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트 발생
error() // 이벤트 대상 요소에서 오류가 발생하면 이벤트 발생
// 마우스 이벤트
click() // 선택한 요소를 클릭했을 때 이벤트 발생
dblclick() // 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트 발생
mouseout() // 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트 발생
mouseover() // 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트 발생
hover() // 선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 이벤트 발생
mousedown() // 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트 발생
mouseup() // 선택한 요소에서 마우스 버튼을 눌렀다 뗐을 때 이벤트 발생
mouseenter() // 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트 발생
mouseleave() // 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트 발생
mousemove() // 선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트 발생
scroll() // 가로, 세로 스크롤바를 움직이면 이벤트 발생
// 포커스 이벤트
focus() // 선택한 요소에 포커스가 생성됐을 때 이벤트 발생 or 선택한 요소에 강제로 포커스 생성
focusin() // 선택한 요소에 포커스가 생성되었을 때 이벤트 발생
focusout() // 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생
blur() // 포커스가 다른 요소로 이동되었을 때 이벤트가 발생 or 선택한 요소에서 강제로 포커스 제거
change() // 입력 요소의 값이 변경되고 포커스가 이동하면 이벤트 발생
// 키보드 이벤트
keypress() // 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생하고, 문자 키를 제외한 키의 코드값 반환
keydown() // 선택한 요소에서 키보드 눌렀을 때 이벤트 발생하고, 키보드의 모든 키의 코드값을 반환.
keyup() // 선택한 요소에서 비코드에서 손을 뗐을 때 이벤트 발생
//그룹 이벤트
on() // 2개 이상의 이벤트 등록, 동적으로 생성되거나 복제된 요소에도 이벤트 적용
bind() // 2개 이상의 이벤트 등록
delegate() // 선택 요소의 하위 요소에 이벤트 등록, 동적으로 생성되거나 복제된 요소에도 이벤트 적용
one () // 이벤트 대상 요소에 1개 이상의 이벤트 등록. 1회 발생하고 자동 해제.
//이벤트 제거 메소드
off() // on 메소드로 등록한 이벤트 제거
unbind() // bind 메소드로 등록한 이벤트 제거
undelegate() // delegate()로 등록한 이벤트 제거
강제로 이벤트 발생
$("button").click(); // 버튼 강제 클릭 효과 작동
$("button").trigger("mouseover"); // 버튼 강제 마우스 오버 효과 작동
강제로 이벤트 방해
$("button").off("click");
기본 이벤트 차단 e.preventDefault
$(function(){
$(".btn1").on("click", function(e){
e.preventDefault();
}
})
e.preventDefault 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn1").on("click", function(e){
e.preventDefault();
$(".txt1").css("background-color","#ff0");
});
$(".btn2").on("click", function(e){
$(".txt2").css("background-color","#0ff");
});
$(".btn3").on("dblclick", function(){
$(".txt3").css({"background-color":"#0f0"})
});
})
</script>
</head>
<body>
<p><a href="http://www.easyspub.co.kr/" class="btn1">버튼1</a></p>
<p class="txt1">내용1</p>
<p><a href="http://www.easyspub.co.kr" class="btn2">버튼2</a></p>
<p class="txt2">내용2</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용3</p>
</body>
</html>
$(this) 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menuWrap_1 a").on("click", function(e){
e.preventDefault();
$(".menuWrap_1 a").css({"background-color":"#fff"});
$(this).css({"background-color":"#ff0"});
});
$(".menuWrap_2 a").on("click", function(e){
e.preventDefault;
$(".menuWrap_2 a").css({"background-color":"#fff"});
var idx1 = $(".menuWrap_2 a").index(this);
$(".menuWrap_2 a").eq(idx1).css({"background-color":"#0ff"});
$(".idxNum").text(idx1);
});
});
</script>
</head>
<body>
<h2>$(this)</h2>
<ul class="menuWrap_1">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<h2>Index()</h2>
<ul class="menuWrap_2">
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
<p class="idxNum"></p>
</body>
</html>
on 메소드를 동적으로 쓰는 방법
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn_1.on").on("mouseover focus", function(){
alert("Hello"); // 실행 안 된다
});
$(".btn_1").addClass("on");
$(document).on("mouseover focus",".btn_2.on", function(){
alert("Welcome"); // 실행 된다
})
$(".btn_2").addClass("on");
})
</script>
</head>
<body>
<div id="wrap">
<p><button class="btn_1">버튼1</button></p>
<p><button class="btn_2">버튼2</button></p>
</div>
</body>
</html>
예시
mouseover, mouseout, hover 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn1").on({
"mouseover":function(){
$(".txt1").css({"background-color":"yellow"});
},
"mouseout":function(){
$(".txt1").css({"background":"none"});
}
});
$(".btn2").hover(function(){
$(".txt2").css({"background-color":"aqua"});
}, function(){
$(".txt2").css({"background":"none"});
});
});
</script>
</head>
<body>
<p><button class="btn1">Mouse Over/Mouse Out</button></p>
<p class="txt1">내용1</p>
<p><button class="btn2">hover</button></p>
<p class="txt2">내용2</p>
</body>
</html>
mouseout, mouseleave 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box_1").on("mouseout",function(){
$("#box_1").css("background-color","yellow");
});
$("#box_2").on("mouseleave",function(){
$("#box_2").css("background-color","pink");
});
})
</script>
</head>
<body>
<h1>mouseout</h1>
<div id="box_1">
<p><a href="#">내용1</a></p>
<p><a href="#">내용2</a></p>
<p><a href="#">내용3</a></p>
</div>
<h1>mouseleave</h1>
<div id="box_2">
<p><a href="#">내용4</a></p>
<p><a href="#">내용5</a></p>
<p><a href="#">내용6</a></p>
</div>
</body>
</html>
mousemove, 마우스 현재 위치 표시 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on("mousemove",function(e){
$(".posX").text(e.pageX);
$(".posY").text(e.pageY);
})
})
</script>
</head>
<body>
<h1>mousemove</h1>
<p>X : <span class="posX">0</span>px</p>
<p>Y : <span class="posY">0</span>px</p>
</body>
</html>
scroll 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script>
$(window).on("scroll", function(){
let sc_top = $(this).scrollTop();
let sc_left = $(this).scrollLeft();
$(".top").text(sc_top);
$(".left").text(sc_left);
})
</script>
<style>
body {
height: 10000px;
width: 5000px;
}
#wrap {
position: fixed;
left: 10px;
right: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<p>scrollTop:<span class="top">0</span>px</p>
<p>scrollLeft:<span class="left">0</span>px</p>
</div>
</body>
</html>
focus & blur, focusin &focusout 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#user_id_1, #user_pw_1").on("focus",function(){
$(this).css({"background-color":"pink"});
});
$("#user_id_1, #user_pw_1").on("blur",function(){
$(this).css({"background-color":"#fff"});
});
$("#frm_2").on("focusin", function(){
$(this).css({"background-color":"pink"});
})
$("#frm_2").on("focusout",function(){
$(this).css({"background-color":"#fff"});
});
});
</script>
</head>
<body>
<h1>focus / blur</h1>
<form action="#" id = "frm_1">
<p><label for="user_id_1">ID</label><input type="text" name="user_id_1" id="user_id_1"></p>
<p><label for = "user_pw_1">PW</label><input type="password" name="user_pw_1" id="user_pw_1"></p>
</form>
<h1>focusin / focustout</h1>
<form action="#" id = "frm_2">
<p><label for="user_id_2">ID</label><input type="text" name="user_id_2" id="user_id2"></p>
<p><label for = "user_pw_2">PW</label><input type="password" name="user_pw_2" id="user_pw_2"></p>
</form>
</body>
</html>
change 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#rel_site").on("change",function(){
$(".txt").text($(this).val());
})
})
</script>
</head>
<body>
<select id="rel_site">
<option value="">사이트 선택</option>
<option value="www.google.com">구글</option>
<option value="www.naver.com">네이버</option>
<option value="www.daum.net">다음</option>
</select>
<p class="txt"></p>
</body>
</html>
keydown 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("keydown",keyEventFnc);
function keyEventFnc(e){
let input = "";
switch(e.keyCode){
case 37 : input="LEFT"; break;
case 38 : input="TOP"; break;
case 39 : input="RIGHT"; break;
case 40 : input="DOWN"; break;
}
if(input){$("#user_id").val(input)};
}
})
</script>
</head>
<body>
<p><input type="text" name="user_id" id="user_id"></p>
</body>
</html>delegate, one 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn_wrap").delegate(".btn_1.on","mouseover focus",function(){
alert("Hello");
});
$(".btn_1").addClass("on");
$(document).one("mouseover focus",".btn_2.on",function(){
alert("Welcome");
});
$(".btn_2").addClass("on");
})
</script>
</head>
<body>
<div id="wrap">
<p class="btn_wrap"><button class="btn_1">버튼1</button></p>
<p><button class="btn_2">버튼2</button></p>
</div>
</body>
</html>
off 예제
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn_1").on("mouseover",function(){
alert("Hello");
});
$(document).on("mouseover",".btn_2", function(){
alert("Welcome");
})
const btn2 = $("<p><button class=\"btn_2\">버튼2</p>");
$("#wrap").append(btn2);
$(".del_1").on("click",function(){
$(".btn_1").off("mouseover");
});
$(".del_2").on("click",function(){
$(document).off("mouseover",".btn_2");
})
})
</script>
</head>
<body>
<div id="wrap">
<p><button class="btn_1">버튼1</button></p>
</div>
<p>
<button class="del_1">버튼1 이벤트 해제</button>
<button class="del_2">버튼2 이벤트 해제</button>
</p>
</body>
</html>
종합 예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
var baseFontSize = 14;
$(".zoomBtnZone button").on("click", zoomInOut);
function zoomInOut (){
if($(this).hasClass("zoomOutBtn")){
if(baseFontSize<=8) return false;
baseFontSize--;
} else if($(this).hasClass("zoomInBtn")){
if(baseFontSize>=20) return false;
baseFontSize++;
} else {baseFontSize = 14;}
$(".fontSize").text(baseFontSize + "px");
$("body").css({fontSize:baseFontSize + "px"});
}
})
</script>
<style>
body{font-size:14px;}
</style>
</head>
<body>
<p class="zoomBtnZone">
<button class="zoomOutBtn">-</button>
<button class="originBtn">100%</button>
<button class="zoomInBtn">+</button>
</p>
<p class="fontSize">14px</p>
<div id="wrap">
우리는 두 수의 최대값을 구하는 경우에 Math클래스를 사용하는데, static 메소드로 선언된 max 함수를 초기화 없이 사용합니다. 하지만 static 메소드에서는 static이 선언되지 않은 변수에 접근이 불가능한데, 메모리 할당과 연관지어 생각해보면 당연합니다. 우리가 Test.printName() 을 사용하려고 하는데, name1은 new 연산을 통해 객체가 생성된 후에 메모리가 할당됩니다. 하지만 static 메소드는 객체의 생성 없이 접근하는 함수이므로, 할당되지 않은 메모리 영역에 접근을 하므로 문제가 발생하게 됩니다. 그러므로 static 메소드에서 접근하기 위한 변수는 반드시 static 변수로 선언되어야 합니다.
</div>
</body>
</html>