jQuery와 이벤트 대표단
- Joseph Gordon-Levitt원래의
- 2025-02-24 09:22:11618검색
- 는 이벤트 대의원을 구현하는 데 사용될 수 있으며, 옵션 두 번째 매개 변수는 대의원 이벤트 핸들러의 선택기를 지정합니다. 그런 다음
- 속성을 사용하여 이벤트를 트리거 한 요소를 식별하십시오.
-
on()jQuery는 JavaScript에서 이벤트 처리를 단순화합니다. 그러나 이벤트 핸들러가 많을수록 메모리가 더 많이 사용되므로 결국 성능 저하로 이어지고 UI 속도가 느려집니다. 이 기사는 이벤트 대의원이이를 방지하는 방법과 jQuery에 이벤트 대의원을 적용 할 수있는 방법을 살펴 봅니다. 이벤트 대표는 이벤트 처리 기술입니다. 이벤트 처리 기술은 이벤트 핸들러를 이벤트를 듣는 각 요소에 직접 추가하는 대신 이러한 요소의 부모 요소에 단일 이벤트 핸들러를 추가하여 어린이 요소에서 발생합니다. 이벤트를 처리 할 때 어떤 요소가 이벤트를 트리거하고 그에 따라 응답하는지 확인하십시오. 이벤트 대표는 DOM의 이벤트 거품에 의존합니다. 이것은 문서에 도달 할 때까지 DOM 트리까지 부모 요소 및 부모 요소 등으로 전파되는 어린이들에게 유발되는 사건의 과정입니다. 프로그래머는 를 사용하여 버블 링을 멈출 수 있습니다. 모든 DOM 이벤트가 전파되는 것은 아닙니다 (초점, 흐림, 부하 및 언로드는 그렇지 않습니다. 이벤트 대의원은 여러 이벤트 핸들러를 단일 이벤트 핸들러로 바꾸기 때문에 메모리를 적게 사용합니다. 예를 들어, 10 개의 링크 목록에있는 각 링크에 이벤트 핸들러를 첨부하는 경우 메모리 공간을 차지하는 10 개의 이벤트 핸들러가 있습니다. 대신, 이벤트 대의원을 사용하고 상위 요소에서 이벤트를 처리하는 경우 각 링크에 첨부 된 메모리보다 하나의 이벤트 핸들러 만 생성되고 메모리가 적은 메모리 만 사용됩니다. 메모리 소비를 줄이는 것 외에도 이벤트 대표단은 다음과 같은 장점이 있습니다. event.targetDOM에서 요소를 추가하거나 제거 할 때 이벤트를 수동으로 관리 할 필요가 없습니다. 기존 이벤트 처리를 사용하는 경우 이벤트 핸들러를 DOM에 추가 된 요소에 첨부하고 DOM에서 제거 된 요소에서 이벤트 처리기를 제거해야합니다.
<code class="language-html"><div id="cats">
<ul>
<li>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="">
<a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
<button>Add to cart</button>
</li>
...
</ul>
</div></code>
- 이 코드는 다음 예제와 유사합니다. 이것은 개별 요소에 이벤트 핸들러를 추가하는 것이 이벤트 대의원 사용과 어떻게 다른지 보여주기위한 것이므로 , , 및 함수에 대한 구현이 없습니다.
-
키는 의 선택적 두 번째 매개 변수에 있습니다. 선택기를 여기에 전달함으로써 - 는 직접 바인딩 이벤트 핸들러 대신 대의원 이벤트 핸들러를 처리하고 있음을 알고 있습니다. 이벤트 처리 코드는 이제 훨씬 간단합니다.
를 기준으로 를 전환함으로써 이벤트를 트리거하고 그에 따라 응답 한 요소를 결정할 수 있습니다. 또한,이 새로운 요소에 의해 트리거 된 이벤트가 상위 요소에 위임되기 때문에 이벤트 핸들러를 에로드 한 요소에 더 이상 첨부 할 필요가 없습니다. 이벤트 대의원을 사용할 때 언급 할 수있는 잠재적 "트랩"은 하위 요소에 첨부 된 이벤트 핸들러가 대의원 핸들러 트리거
결론 loadImage() moreInfo()
이 기사에서는 이벤트 대표단을 연구합니다. 우리는 그것이 포함하는 이벤트 처리로드를 줄임으로써 웹 사이트의 성능을 향상시키는 데 어떻게 도움이 될 수 있는지 보았습니다. 우리는 또한 addToCart() 함수를 통해 jQuery에서 이벤트 대의원을 구현하는 방법을 보았습니다. loadNewKittens()
<code class="language-javascript">$(document).ready(function() {
var cats = $('#cats');
cats.find('img')
.on('click', function() {
loadImage();
})
cats.find('a')
.on('click', function(event) {
event.preventDefault();
moreInfo();
});
cats.find('button')
.on('click', function() {
addToCart();
});
$(window).scroll(function() {
var fragment = loadNewKittens();
// 为新的DOM元素附加事件处理程序
fragment.find('img')
.on('click', function() {
loadImage();
});
fragment.find('a')
.on('click', function(event) {
event.preventDefault();
moreInfo();
});
fragment.find('button')
.on('click', function() {
addToCart();
});
fragment.appendTo('#cats ul');
});
});</code>
jQuery의 이벤트 대표는 무엇이며 왜 중요한가?
<code class="language-javascript">$(document).ready(function() {
$('#cats')
.on('click', 'img, a, button', function(event) {
event.preventDefault();
var target = event.target;
switch(target.tagName.toLowerCase()) {
case 'img':
loadImage();
break;
case 'a':
moreInfo();
break;
case 'button':
addToCart();
break;
default:
// 什么也不做
}
});
$(window).scroll(function() {
var fragment = loadNewKittens();
fragment.appendTo('#cats ul');
});
});</code>
jQuery의 이벤트 대표는 대부분의 jQuery 이벤트가 Dom 트리까지 거품을 일으키거나 전파한다는 사실을 활용합니다. 어린이 요소에서 이벤트가 발사되면 부모 요소로 거품이됩니다. 이벤트 리스너를 부모 요소에 추가하면 자식 요소에 트리거 된 이벤트를 캡처 할 수 있습니다.
속성을 사용하여 어떤 자식 요소가 이벤트를 트리거했는지 결정할 수 있습니다.
event.target
메소드를 사용하는 방법은 무엇입니까?
jQuery의 메소드는 이벤트 핸들러를 첨부하는 데 사용됩니다. 이벤트 대의원의 경우 세 가지 매개 변수를 사용합니다. 이벤트 유형, 후손을 필터링하는 데 사용되는 선택기 문자열 및 핸들러 기능이 사용됩니다. 이벤트 유형은 이벤트 유형 (예 : "클릭")을 나타내는 문자열이며, 선택기 문자열은 이벤트를 트리거하는 선택한 요소의 후손을 필터링하는 데 사용되며 핸들러 기능은 이벤트가 실행될 기능입니다. 트리거.
예, jQuery의 이벤트 대표의 주요 장점 중 하나는 동적으로 추가 된 요소의 이벤트를 처리 할 수 있다는 것입니다. 이벤트 리스너는 상위 요소에 첨부되므로 이벤트 리스너가 첨부 된 후에 해당 이벤트가 추가 되더라도 자식 요소에 트리거 된 이벤트를 캡처 할 수 있습니다. .on()
이벤트 버블은 무엇이며 jQuery의 이벤트 대표와 어떤 관련이 있습니까?
이벤트 버블은 이벤트 전파 유형으로, 이벤트가 특정 요소로 시작하여 조상에게 거품을 일으키는 이벤트 전파 유형입니다. jQuery 사용 이벤트 버블의 이벤트 대표단 이벤트 청취자를 부모 요소에 첨부합니다. 어린이 요소에서 이벤트가 발사되면 이벤트 청취자가 캡처 할 수있는 상위 요소로 거품이됩니다. .on()
.on()
jQuery에서 이벤트 처리에 사용되는 와
방법의 차이점은 무엇입니까? jQuery의 메소드는 이벤트 핸들러를 요소에 직접 첨부하는 데 사용됩니다. 반면에 메소드는 이벤트 핸들러를 요소 (예 : )에 직접 첨부하는 데 사용될 수 있으며 이벤트 위임을위한 부모 요소에 사용할 수 있습니다.
메소드는보다 일반적이며 jQuery에 이벤트 핸들러를 첨부하는 데 선호되는 방법입니다.
예, 이벤트 대의원을 사용하여 jQuery에서 사용자 정의 이벤트를 처리 할 수 있습니다. 표준 이벤트와 마찬가지로 이벤트 리스너를 부모 요소에 첨부 할 수 있으며,이 요소는 어린이들에게 트리거 된 맞춤형 이벤트를 캡처합니다.
위 내용은 jQuery와 이벤트 대표단의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：고급 CSS3 2D 및 3D 변환 기술다음 기사：고급 CSS3 2D 및 3D 변환 기술