이벤트를 연결할 때 on( ) 메서드를 사용한다
on( ) 메서드에 넣을 수 있는 매개변수가 엄청 다양하다
selector 매개변수로 이벤트 범위를 한정할 수 있다
이렇게 범위를 한정하는 이벤트 연결 방식을 delegate 방식이라고 한다
<body>
<div id="wrap">
<h1>Header</h1>
</div>
</body>
$(function () {
$('h1').on('click', function () {
var length = $('h1').length;
var targetHTML = $(this).html();
$('#wrap').append('<h1>' + length + " - " + targetHTML + "</h1>");
})
})
이렇게 코드를 실행하면 h1 태그가 추가되지만 on( ) 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에 새로 생긴 h1 태그를 클릭하면 이벤트가 발생하지 않는다
이러한 경우에는 상위 태그에 이벤트를 연결하고 "h1 태그를 클릭했을 때"를 검출해야 한다
$(function () {
$('#wrap').on('click', 'h1', function () {
var length = $('h1').length;
var targetHTML = $(this).html();
$('#wrap').append('<h1>' + length + " - " + targetHTML + "</h1>");
})
})이렇게 코드를 실행하면 새로 생긴 h1태그도 이벤트가 적용된다
이벤트 리스너에서 this 키워드가 #wrap 태그가 아니라 h1 태그라는 것을 주의하자
$(function () {
$('#wrap').on('click', 'h1', function () {
var length = $('h1').length;
var targetHTML = $(this).html();
$('#wrap').append('<h1>' + length + " - " + targetHTML + "</h1>");
$('#wrap').off('click', 'h1');
})
})
on( ) 메서드의 이벤트 리스너 삭제 off( ) 메서드
과거의 이벤트 연결 방식 (jQuery 3.xx 버전부터 모두 제거됨)
- bind( ) : 현재 존재하는 문서 객체에만 이벤트를 연결한다
- delegate( ) : 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결한다
- live( ) : 현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결한다
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 29) - 키보드 이벤트 (0) | 2020.08.12 |
|---|---|
| JS jQuery (part. 28) - 마우스 이벤트 (0) | 2020.08.11 |
| JS jQuery (part. 26) - 기본 이벤트와 이벤트 전달 (0) | 2020.08.10 |
| JS jQuery (part. 25) - 이벤트 강제 발생 (0) | 2020.08.10 |
| JS jQuery (part. 24) - 이벤트 객체 활용 (0) | 2020.08.10 |
