이벤트 연결, 제거 메소드 예제 2[제이쿼리,jQUERY강좌교육/구로디지털/가산/jQUERY교육/제이쿼리강좌]
on() : 이벤트를 연결, 기존 이벤트 연결 메소드 대체
off() : 이벤트를 제거, 이벤트의 모든 핸들러를 제거 하고자 하는 경우
off() : 이벤트를 제거, 이벤트의 모든 핸들러를 제거 하고자 하는 경우
<style>
* {margin:0px; padding:0px;}
div {margin:10px; padding:10px;
border:3px Solid Blue;
border-radius:10px; }
</style>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//이벤트이름,이벤트가지정될선택자,이벤트핸들러지정
$("div").on("click", function() {
$(this).clone().appendTo("body");
});
//5초후 모든 div의 이벤트 제거
setTimeout(function() {
$("div").off();
}, 5000);
});
</script><body> <div>
<h1>오엔제이프로그래밍실무학원</h1>
<p>www.onjprogramming.co.kr</p></div></body>
* {margin:0px; padding:0px;}
div {margin:10px; padding:10px;
border:3px Solid Blue;
border-radius:10px; }
</style>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//이벤트이름,이벤트가지정될선택자,이벤트핸들러지정
$("div").on("click", function() {
$(this).clone().appendTo("body");
});
//5초후 모든 div의 이벤트 제거
setTimeout(function() {
$("div").off();
}, 5000);
});
</script><body> <div>
<h1>오엔제이프로그래밍실무학원</h1>
<p>www.onjprogramming.co.kr</p></div></body>