JQuery문을 이용해서 이벤트를 활성화 하는 법을 알아보자.
bind() : 현재 문서에 존재하는 객체에 event 속성을 부여
unbind() : bind로 생성된 이벤트 제거
on() : 1.7 버전 이후로 쓰이고 bind와 기능은 같다. bind보단 on을 사용하길 권장한다.
off() : on으로 생성된 이벤트 제거
bind('이벤트명', function)으로 사용하고
on은 on('이벤트명':function, '이벤트명':function, '이벤트명':function, '이벤트명':function, .....) 과 같이 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#test2, #test3 {
width:300px;
height:300px;
background:orangered;
}
</style>
</head>
<body>
<h1>이벤트</h1>
<h3>이벤트 관련 속성</h3>
<button onclick="test1(event)">실행 확인</button>
<script type="text/javascript">
function test1(event) {
console.log(event);
}
</script>
<hr>
<h3>이벤트 연결 종류</h3>
<h4>bind() : 현재 존재하는 문서 객체만 이벤트 연결<br>
unbind() : bind()로 연결된 이벤트 제거</h4>
<h1 id="test1">마우스를 올려보세요</h1>
<script>
$(function(){
$("#test1").bind('mouseenter', function(){
$(this).css({"background":"black", "color":"white"});
}).bind('mouseleave', function(){
$(this).css({"background":"white", "color":"black"});
});
$("#test1").bind('click', function(){
$(this).unbind('mouseenter').unbind('mouseleave').css({"background":"white", "color":"black"});
});
});
</script>
<h4>on() : bind()대신에 on으로 대체됨<br>
off() : on()으로 연결된 이벤트 제거</h4>
<div id="test2">기본상태</div>
<script>
$(function(){
$("#test2").on({'mouseenter':function(){
$(this).css("background", "yellowgreen").text("마우스 올라감");
}, 'mouseleave':function(){
$(this).css("background", "yellow").text("마우스 내려감");
}, 'click':function(){
$(this).off('mouseenter').off('mouseleave').css("background", "orangered").text("기본값");
}});
});
</script>
<br>
<div id="test3">기본상태</div>
<script type="text/javascript">
$(function() {
$("#test3").on("click", {name : "김가루"}, function(event) {
alert(event.data.name + "님 환영합니다!");
});
});
</script>
<br>
<div id="wrap">
<h2>Header</h2>
</div>
<script>
$(function(){
$(document).on('click', 'h2', function(){
var length = $("h2").length;
var targetHTML = $(this).html();
console.log(length);
console.log(targetHTML);
$("#wrap").append("<h2>" + targetHTML + " - " + length + "</h2>");
});
});
</script>
<hr>
<h3>one() 메소드</h3>
<p>이벤트를 한 번만 연결할 때 사용한다.</p>
<h1 id="test4">클릭하세요</h1>
<script type="text/javascript">
$(function() {
$("#test4").one("click", function() {
alert("이벤트 발생!!");
});
});
</script>
</body>
</html>
jq에서 이벤트를 지정하는 다른 방법은
$(불러올 객체).이벤트명(function)과 같이 쓴다.
이와 같이 다양한 이벤트 지정 방법이 존재하므로 마음에 드는 방법을 사용하면 된다.
mouseover, mouseenter, hover, keydown, keypress, keyup, click, change, focus 등 다양한 이벤트 키워드들이 있고
이 중 hover이나 focus 같이 사용법이 특이한 경우도 있으므로 예에서 잘 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.inner{
width: 100%;
height: 100%;
background: red;
}
.outer{
width: 200px;
height: 200px;
background: orange;
padding: 50px;
}
.reverse{
background: black;
color: white;
}
</style>
</head>
<body>
<h1>이벤트 연결 메소드</h1>
<h3>mouseover와 mouseenter</h3>
<div class="outer">
<div class="inner"></div>
</div>
<script type="text/javascript">
// mouseover는 요소에 마우스 포인터가 진입하면 발생
// (직접 이벤트를 걸지 않은 자식요소에 포인터가 와도 발생함)
// mouseenter는 오로지 자신에게 마우스 포인터가 와야만 발생함
$(function() {
$(".outer").mouseover(function() {
console.log("OVER!");
});
$(".outer").mouseenter(function() {
console.log("ENTER")
});
});
</script>
<h3>hover() 메소드</h3>
<p>mouseenter와 mouseleave를 동시에 사용하는 효과이다.</p>
<h1 id="test1">hover테스트</h1>
<script type="text/javascript">
$(function() {
$("#test1").hover(
function() { // 첫번째는 mouseenter
$(this).addClass("reverse");
},
function() { // 두번째는 mouseleave
$(this).removeClass("reverse");
}
);
});
</script>
<h3>키보드이벤트</h3>
<p>keydown : 키보드가 눌려질 때<br>
keypress : 글자가 입력될 때<br>
keyup : 키보드가 떼어질 때</p>
<h4>동적으로 글자 수 세기</h4>
<div>
<h1 id="counter">150</h1>
<textarea rows="5" cols="70"></textarea>
</div>
<script type="text/javascript">
$(function() {
$("textarea").keydown(function() {
var inputLength = $(this).val().length;
var remain = 150 - inputLength;
$("#counter").html(remain);
if (remain >= 0) {
$("#counter").css("color", "black");
}else {
$("#counter").css("color", "red");
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.trg {
width:100px;
height:100px;
background:orangered;
text-align:center;
vertical-align:middle;
cursor:pointer;
}
.increment {
background:black;
width:100px;
height:25px;
color:white;
text-align:center;
margin-top:20px;
cursor:pointer;
}
</style>
</head>
<body>
<h1>입력 양식 이벤트</h1>
<div id="wrap">
<h1 align="center">회원 가입</h1>
<form>
<table align="center">
<tr>
<td><label>이름</label></td>
<td><input type="text" name="name" id="name"></td>
<td><label id="nameresult"></label></td>
</tr>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="userid" id="userid"></td>
<td><input type="button" value="중복확인"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="pwd1" id="pwd1"></td>
<td></td>
</tr>
<tr>
<td><label>비밀번호 확인</label></td>
<td><input type="password" name="pwd2" id="pwd2"></td>
<td><label id="pwdresult"></label></td>
</tr>
<tr>
<td><label>이메일</label></td>
<td><input type="email" name="email" id="email"></td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="submit"> <input type="reset"></td>
<td></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$("#name").change(function(){
var regExp = /[가-힣]/;
if(!regExp.test($(this).val())){
$("#nameresult").html("한글로 입력하세요").css("color", "red");
$(this).focus().css("background","red");
}else{
$("#nameresult").html("정상입력").css("color","green");
}
});
$("#pwd2").change(function(){
if($("#pwd1").val() != $(this).val()){
$("#pwdresult").html("비밀번호가 일치하지 않습니다").css("color","red");
$("#pwd2").val('');
$(this).select();
}else{
$("#pwdresult").html("비밀번호 일치").css("color","green");
}
});
$("#name").focus(function(){
console.log('focus이벤트 가동');
}).focusin(function(){
console.log('focusin이벤트 가동');
}).focusout(function(){
console.log('focusout이벤트 가동');
}).blur(function(){
console.log('blur이벤트 가동');
}).change(function(){
console.log('change이벤트 가동');
}).select(function(){
console.log('select이벤트 가동');
})
$("form").submit(function(event){
alert("submit이벤트 동작");
event.preventDefault();
});
</script>
<div id="result"></div>
<script>
$(function(){
$("input[type=submit]").click(function(){
$("#result").html("이름 : " + $("#name").val());
});
});
</script>
<hr>
<h3>trigger()메소드</h3>
<div class="trg" id="trg">
click Num : <span>0</span>;
</div>
<div class="increment" id="increment">click me!</div>
<script type="text/javascript">
var ctn = 0;
$(function() {
$("#trg").on("click", function() {
ctn++;
$("span").text(ctn);
});
});
$("#increment").click(function() {
$("#trg").trigger("click");
});
</script>
</body>
</html>