이벤트 제거 메서드 : 이전에 등록된 이벤트를 제거
이벤트 등록 메서드에 따라 이벤트를 해제하는 방법도 달라짐
bind() : 이벤트 등록시 이전에 많이 사용하던 메서드, 제이쿼리 3점대 부터는 사용을 권장하지 않음
off() : on() 메서드로 등록한 이벤트를 제거
unbind() : bind() 메서드로 등록한 이벤트를 제거
undelegate() : delegate() 메서드로 등록한 이벤트를 제거
1) on() 이벤트 해제를 위한 off() 메서드
기본 이벤트 제거 방식
$("이벤트 대상 요소 선택").off("이벤트 종류");
라이브 이벤트 제거 방식
$(document | "이벤트 대상의 상위 요소 선택").off("이벤트 종류", "이벤트 대상 요소 선택");
2) bind() 이벤트 해제를 위한 unbind() 메서드
$("이벤트 대상 요소 선택").unbind("이벤트 종류");
3) delegate() 이벤트 해제를 위한 undelegate() 메서드
기본 이벤트 제거 방식
$("이벤트 대상 요소 선택").undelegate("이벤트 종류");
라이브 이벤트 제거 방식 (순서 주의)
$(document | "이벤트 대상의 상위 요소 선택").undelegate("이벤트 대상 요소 선택", "이벤트 종류");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
/*
*/
$(function() {
// .btn_1 클래스를 가진 요소에 마우스를 올리면 HELLO 라는 경고창이 뜨게 on() 메서드 작성
$('.btn_1').on('mouseover', function () {
alert('HELLO!');
});
// .btn_2 클래스를 가진 요소에 마우스를 올리면 WELCOME 라는 경고창이 뜨게 on() 메서드를 라이브 이벤트 방식으로 작성
$('#wrap').on('mouseover', '.btn_2', function() {
alert('WELCOME!');
});
// btn_2 클래스를 가진 버튼을 wrap이라는 아이디를 가진 요소의 자식요소로 추가
$('#wrap').append('<p><button class="btn_2">버튼2</button></p>');
//이벤트 해제
$('.del_1').on('click', function () {
$('.btn_1').off('mouseover');
})
$('.del_2').on('click', function () {
$('#wrap').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>
