1. 이벤트 종류
2. 이벤트 등록 및 제거
3. 이벤트 등록 – on() 메소드
1) p노드에 click 이벤트 등록, $(this)는 p태그가 됨.
2) body 노드에 click 이벤트 등록이지만 두번째 매개변수가 p 태그여서 결국 body 중에 p 태그에만 click 이벤트를 등록하라는 의미
3) event에 data 프로퍼티 접근 방법임
4) 두번째 매개변수가 foo 프로퍼티에 bar라는 문자열을 전송함. 결국 myHandler에 event에 data 프로퍼티로 넘어가게됨.
5) form에서 submit 이벤트 발생시 false 즉 무효처리를 하라는 의미
6) 5번과 같은 의미가 됨.
7) form에서 submit 이벤트 발생시 이벤트 전파를 금지시켜라는 의미
12-01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-01</title>
<style type="text/css">
.test { color: #000; padding: .5em; border: 1px solid #444; }
.active { color: #900; font-weight: bold; }
.inside { background-color: aqua; }
</style>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//강의노트에서 두번째 on 메소드를 사용함
$("div.test").on({
click: function(){
$(this).toggleClass("active");//active 클래스 적용
},
mouseenter: function(){
$(this).addClass("inside");
$(this).text("mouseenter");
},
mouseleave: function(){
$(this).removeClass("inside");
$(this).text("mouseleave");
}
});
});
</script>
</head>
<body>
<div class="test">ready</div>
</body>
</html>
출력 화면
4. 이벤트 등록 – one() 메소드
12-02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-02</title>
<style type="text/css">
div { width:60px; height:60px; margin:5px; float:left;
background:green; border:10px outset;
cursor:pointer; }
p { color:red; margin:0; clear:left; }
</style>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var n = 0;
$('div').one('click', function() {
var index = $('div').index(this);
$(this).css({
borderStyle:"inset",
cursor:"auto"
});
$('p').text(index + '번 인덱스에 있는 div가 클릭되었습니다.(총 ' + ++n + ' 번 클릭됨)');
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>녹색 상자를 클릭하세요...</p>
</body>
</html>
출력 화면
5. 이벤트 제거 – off() 메소드
12-03.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-03</title>
<style type="text/css">
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function aClick(){
//잠시 나타났다가 사라져라라는 의미
$('div').show().fadeOut('slow');
};
//click 이벤트 등록시 이렇게 해도된다.
$('#bind').click(function(){
//#theone이라는 id 클릭이 aClick를 연결해라
//jQuery의 모든 메소드는 자신을 반환하므로 find 메소드를 이어서 쓸수 있다.
$('body').on('click', '#theone', aClick)
.find('#theone').text('이 버튼에 클릭기능 추가 완료');
});
$('#unbind').click(function(){
$('body').off('click', '#theone', aClick)
.find('theone').text('이 버튼 클릭기능 제거 완료');
});
});
</script>
</head>
<body>
<button id="theone">이 버튼은 클릭 기능이 제거되었습니다...</button>
<button id="bind">클릭 기능 추가</button>
<button id="unbind">클릭 기능 제거</button>
<div style="display:none;">버튼이 클릭되었습니다!</div>
</body>
</html>
출력 화면
6. 이벤트 취소와 이벤트 전파 차단
1) 폼에 입력된 내용을 서버로 전송하지 않겠다.
2) anchor(앵커)의 기본 기능을 수행하지 않겠다.
3) p의 버블링 즉 이벤트 전파를 억제하겠다.
12-04.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-04</title>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function(event){
event.preventDefault();
//클릭시 id가 log인 자식에 div가 계속 추가된다.
//$('<div></div>')와 같은 의미
$('</div>').append('<a> 태그의 기본' + event.type + '액션이 취소되어있습니다.')
.appendTo('#log');
});
});
</script>
</head>
<body>
<a href="http://jquery.com">jquery.com</a>
<div id="log"></div>
</body>
</html>
출력 화면
12-05.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-05</title>
<style type="text/css">
div {
cursor: pointer;
}
div#inner {
background-color: #adff2f;
}
div#outer {
background-color: #dda0dd;
}
</style>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#outer').click(function(event) {
$('<div/>').append('외부 div를 클릭하였습니다.')
.appendTo('#log');
});
$('#inner').on('click', function(event) {
event.stopPropagation();
$('<div/>').append('내부 div를 클릭하였습니다.')
.appendTo('#log');
});
});
</script>
</head>
<body>
<div id="outer">
외부영역을
<div id="inner">
내부 영역을 클릭해 보세요!!!
</div>
클릭해보세요!!!
</div>
<div id="log">
</div>
</body>
</html>
출력 화면
stopPropation을 안하면 위와 같이 된다. 이유는 버블링 때문
만약 주석처리하면 다음과 같이 버블링이 없어진다.
