jQuery는 이벤트를 바인딩하는 다양한 방법을 제공합니다. 각 방법에는 고유한 특성이 있습니다. 이들 간의 유사점과 차이점을 이해하면 코드를 작성할 때 올바른 선택을 하여 코드를 우아하고 유지 관리하기 쉽게 만드는 데 도움이 됩니다. jQuery에서 이벤트를 바인딩하는 방법을 살펴보겠습니다.
jQuery는 바인딩, 라이브, 위임, 켜기의 네 가지 이벤트 모니터링 방법을 제공합니다. 모니터링 차단을 해제하는 데 해당하는 기능은 unbind, die, undelegate 및 off입니다. 살펴보기 전에
1: 바인딩(type,[data],function(eventObject))
더 자주 사용되는 바인딩은 요소를 선택하는 기능입니다. 특정 이벤트 유형의 청취 기능은 다음과 같습니다.
유형: 클릭, 변경, 마우스오버 등의 이벤트 유형
데이터: 전달되는 매개변수 이벤트를 통해 청취 기능에 .data가 획득됩니다. 선택사항;
함수: 이벤트 객체를 전달할 수 있는 청취 함수. 여기서 이벤트는 jQuery로 캡슐화된 이벤트 객체이므로 사용 시 주의가 필요합니다.
바인드 소스 코드 :
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); } $('#myol li').bind('click',getHtml);
바인드의 특징은 리스너를 대상 요소에 1:1로 바인딩하여 사용한다는 것입니다. 페이지의 요소가 동적으로 추가되지 않는 경우에는 문제가 없습니다. 그러나 "목록 요소 5"가 목록에 동적으로 추가되면 클릭해도 응답이 없으므로 다시 바인딩해야 합니다. 이 문제를 피하기 위해 라이브를 사용할 수 있습니다.
jQuery에는 a.click(function(){});, a.change(function(){}); 등과 같은 간단한 이벤트 바인딩 방법도 있습니다. 해당 기능은 다음과 같습니다. 바인딩, 만(Bind, only) 단지 약어일 뿐입니다.
둘: live(type, [data], fn)
live의 매개변수는 바인딩과 동일합니다. 먼저 소스 코드를 살펴보겠습니다. 🎜>
live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }
$('#myol li').context; //document $('#myol li','#myol').context; //document $('#myol li',$('#myol')[0]); //ol
$('#myol li').live('click',getHtml);
delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }
$('#myol').delegate('li','click',getHtml);
on(type,[selector],[data],fn)
$('#myol li').on('click',getHtml);