jquery에서 이벤트 프록시는 이벤트를 상위 요소에 바인딩하고 이벤트를 실행하기 전에 이벤트가 DOM을 통해 요소에 버블링될 때까지 기다리는 것을 의미합니다. 이벤트 프록시는 이벤트 버블링 원리를 사용하여 소스를 결정하여 상위 요소에 이벤트를 추가합니다. 이벤트를 처리하고 해당 하위 요소에 대한 작업을 수행하면 이벤트 바인딩 수가 크게 줄어들고 성능이 향상됩니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, jquery 버전 3.6.0, Dell G3 컴퓨터.
jQuery에서 이벤트 프록시는 이벤트를 상위 요소에 바인딩한 다음 이벤트를 실행하기 전에 DOM을 통해 요소에 버블링될 때까지 기다리는 것을 의미합니다.
이벤트 프록시는 이벤트 버블링(이벤트 버블링은 이벤트가 상위 요소에 레벨별로 전달된다는 의미)의 원리를 사용하여 이벤트를 상위 요소에 추가하고 소스를 판단하여 하위 요소의 해당 작업을 수행하는 것입니다. 이벤트 프록시는 첫째로 이벤트 바인딩 수를 크게 줄이고 성능을 향상시킬 수 있으며, 둘째로 새로 추가된 하위 요소가 동일한 작업을 수행하도록 허용할 수 있습니다.
이벤트 수신 중에 이벤트를 트리거하는 방법에는 이벤트 캡처와 이벤트 버블링이라는 두 가지 방법이 있습니다. 이벤트가 더 빠르고 효율적으로 발생합니다.
이벤트 캡처: 이벤트는 DOM의 하위 요소로 싱크됩니다.
이벤트 버블링: 이벤트가 발생한 소스 요소에서 DOM을 통해 이벤트가 버블링됩니다.
jQuery는 이벤트 버블링을 사용하여 모든 이벤트를 처리합니다. jQuery 라이브러리는 요소의 이벤트 처리 함수를 바인딩하는 세 가지 메서드, 즉 바인딩(), 라이브() 및 대리자()를 제공합니다.
1. .bind()를 사용하여 이벤트 처리 기능을 바인딩합니다. 두 개의 매개변수를 제공해야 합니다. 첫 번째는 이벤트 유형이고 두 번째는 이벤트 처리 기능입니다.
.bind(이벤트 유형, 이벤트 핸들)
예:
$(document).ready(function(){
$(".selector").bind("click",alertMe);
function alertMe(){
alert("Hello world!");
}
});.bind() 메서드는 DOM에 이미 존재하는 요소에 이벤트 핸들러를 바인딩하는 데에만 적합합니다. 이는 나중에 작업 스크립트를 통과할 때 추가되는 DOM 요소에는 영향을 주지 않습니다.
상상해 보세요. DOM에 .box 요소가 있습니다. 클릭할 때마다 이 요소를 복사하여 DOM에 추가하는 링크가 필요합니다. 먼저, 적절한 클릭 이벤트 핸들러를 이 링크에 바인딩할 수 있습니다. 이 링크를 클릭할 때마다 .clone() 메서드가 한 번 호출되어 상자 요소를 복사하고 해당 컨테이너에 추가합니다.
$(document).ready(function(){
$('.box').bind('click',function(){
$(this).clone().appendTo('.container');
});
});
<div class="container">
<div class="box">click me</div>
</div>브라우저에서 실행하면 결과는 이 링크를 클릭하면 요소가 추가됩니다. 단, 첫 번째 링크가 아닌 요소를 클릭하면 클릭 이벤트가 실행되지 않습니다.
그래서: 바인딩된 클릭 이벤트는 DOM에 방금 추가된 새 요소에 작용할 수 없습니다. 이벤트를 바인딩하는 순간 DOM에 존재하는 요소만 클릭 이벤트를 성공적으로 바인딩합니다. click 이벤트는 첫 번째 요소에만 바인딩되므로 첫 번째 요소는 연속적으로 복제될 수 있지만 복제된 요소는 클릭 이벤트의 영향을 받지 않습니다. 이 복제된 요소가 클릭 이벤트의 영향을 받도록 하려면 .live() 바인딩을 사용할 수 있습니다.
2. .live()를 사용하여 이벤트 처리 함수를 바인딩합니다.
.live() 메서드는 이벤트를 캡처하는 매우 유연한 방법을 제공합니다. 사용법은 .bind()와 매우 유사합니다. 유일한 차이점은 .live() 메서드가 현재 DOM에 존재하는 요소뿐만 아니라 미래에 존재할 수 있는 요소(동적으로 생성됨)에도 작동한다는 것입니다.
.live(이벤트 유형, 이벤트 핸들)
위 예제를 수정합니다:
$(document).ready(function(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
});
<div class="container">
<div class="box">click me</div>
</div>3. .delegate()를 사용하여 이벤트 처리 함수를 바인딩합니다.
.delegate(선택기, 이벤트 유형, 이벤트 핸들러)
수정 위의 예:
<script type="text/javascript">
$(document).ready(function(){
$('.container').delegate('.box','click',function(){
$(this).clone().appendTo('.container:first');
});
});
</script>
<body>
<div class="container">
<div class="box">click me</div>
</div>
<div class="container">
<div class="box">click me</div>
</div>
<div class="container">
<div class="box">click me</div>
</div>
</body>실행 효과는 .live()를 사용하여 이벤트 핸들러 함수를 바인딩하는 것과 동일합니다. 그러나 .delegate()를 사용하여 이벤트 처리 함수를 바인딩하는 것이 .live()를 사용하는 것보다 더 효율적입니다. 바인딩
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
live: function( types, data, fn ) {
alert(this.context); //添加一行
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
alert(this); //添加一行
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
},에 대한 jQuery 라이브러리의 소스 코드 중 일부는 live 및 위임 메서드에 각각 한 줄을 추가합니다. 브라우저가 실행된 후 .live()를 사용하면 문서가 나타납니다. .live()는 이벤트를 바인딩합니다. 소스는 문서입니다. .delegate()를 사용하면 객체가 팝업됩니다. 즉, .delegate()를 사용하여 이벤트를 바인딩하면 해당 소스는 바인딩된 특정 요소입니다. 따라서 .delegate()를 사용하는 것이 .live()를 사용하는 것보다 더 효율적입니다.
소스 코드에서 볼 수 있듯이 이벤트 처리 함수를 바인딩하려면 .bind()를 사용하고, 이벤트 바인딩을 취소하려면 unbind()를 사용합니다.
이벤트 처리 함수를 바인딩하려면 .live()를 사용하고, 이벤트 바인딩을 취소하려면 die()를 사용하면 됩니다.
.delegate()를 사용하여 이벤트 처리 기능을 바인딩하고, undelegate()를 사용하여 이벤트 바인딩을 취소할 수 있습니다.
동영상 튜토리얼 추천: jQuery 동영상 튜토리얼
위 내용은 Jquery 이벤트 프록시는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
