그룹 이벤트 등록 메서드
on() : 이벤트 대상 요소에 2개 이상의 이벤트를 등록. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성 되거나 복제된 요소에도 이벤트가 적용 됨
-> 객체 조작 메소드에 의해 새롭게 생성, 복제된 요소에 이벤트를 등록할려면 라이브 이벤트 등록 방식으로 사용해야 함
on()메서드의 라이브 이벤트 등록 방식으로 사용
기본형 :
$(document or "이벤트 대상의 상위 요소 선택").on("이벤트 종
류", "이벤트 대상 선택", 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() {
// 이벤트를 등록하고 class 값을 생성하면 이벤트가 정상적으로 등록 되지 않음
$('.btn_1.on').on('mouseover focus', function() {
alert('HELLO!');
});
$('.btn_1').addClass('on'); // 이벤트를 등록 후 class 값을 생성
// 라이브 이벤트 등록 방식으로 이벤트를 등록한 다음 class 값을 생성하면 이벤트가 정상적으로 등록
$(document).on('mouseover focus', '.btn_2.on', function() {
alert('WELCOME!');
});
$('.btn_2').addClass('on'); // 이벤트를 등록 후 class 값을 생성
});
</script>
</head>
<body>
<div id="wrap">
<p><button class="btn_1">버튼1</button></p>
<p><button class="btn_1 on">버튼1</button></p>
<p><button class="btn_2">버튼2</button></p>
</div>
</body>
</html>
