delegate() : 선택한 요소의 하위 요소에 이벤트를 등록
이벤트를 등록한 이후에도 동적으로 생성된 요소와 복사된 요소에도 이벤트를 등록
기본형
$(document | "이벤트 대상의 상위 요소 선택").delegate("이벤트대상 요소 선택", "이벤트 종류", function () {
자바 스크립트 코드;
});
one()
: 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거. 일회성 이벤트를 등록할 때 사용
기본형 :
1) 기본 이벤트 등록 방식
$("이벤트 대상 선택").one("이벤트 종류", function () {
자바스크립트 코드;
});
2) 라이브 이벤트 등록 방식
$(document | "이벤트 대상의 상위 요소 선택").one("이벤트 종류", "이벤트 대상 선택", function () {
자바 스크립트 코드;
});
이벤트 제거 메서드 : 이전에 등록된 이벤트를 제거
이벤트 등록 메서드에 따라 이벤트를 해제하는 방법도 달라짐
<!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_wrap').delegate('.btn_1.on',
'mouseover focus', function () {
alert('HELLO');
}
);
$('.btn_1').addClass('on');
// 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거
$(document).one('mouseover focus',
'.btn_2.on', function () {
alert("WELCOME!");
});
$('.btn_2').addClass('on'); // .btn_2 에 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>
