엄청난 양의 자식 div가있는 div가 있습니다 (약 4k-5k!). 각 어린이는 'mousedown' 및 'mouseup' 이벤트가 첨부되어 있습니다.jQuery 이벤트 성능 : 각 이벤트의 부모 또는 개별 이벤트에 단일 이벤트를 바인드 하시겠습니까?
대신 부모에게 이러한 이벤트를 첨부하고 $(e.target)을 사용하여 하위를 선택해야합니까? 성능 이점이 있습니까? 그렇다면 왜 그렇습니까?
감사합니다.
나는 jquery.on()을 사용하는 것이 이상적이라고 생각합니다. 당신의 HTML처럼 보일 수 있습니다
$("#divWithHugeAmountsOfChildDiv").on("mousedown",
".childCLASSEStoMouseDown",
function()
{
alert("Booya!");
});
: 필요에 따라 jQuery를 선택기를 변경
<body>
<!-- lots of other elements -->
<div id="divWithHugeAmountsOfChildDiv">
<!-- lots of different type of elements -->
<div class="childCLASSEStoMouseDown">Booya?</div>
<!-- lots of different type of elements -->
</div>
<!-- lots of other elements -->
</body>
... 아주 잘 On 방법에 대한 jQuery를 설명서에 언급 된 이유
.
많은 하위 div를 사용하면 위임 된 이벤트 처리를 jQuery의 .on()과 함께 사용해야합니다. 이렇게하면 자식에 대한 4000 개의 이벤트 처리기 대신 부모에 하나의 이벤트 처리기가 제공됩니다. 또한 설치하고 초기화하는 것이 훨씬 빠릅니다.
.on()의 위임 된 양식을 사용하는 경우 e.target을 확인하지 않아도되므로 jQuery가 자동으로 확인합니다.
이런 식으로 .on()를 사용하는 구문은 다음과 같다 다음 jQuery doc for .on()에
$('parentSelector').on('mousedown', 'child selector', function(e) {
// code here
// "this" will be the object that initiated the event
});
더 많은 정보를 원하시면.
jQuery의 .on()을 이미 사용하고 있습니다. 이벤트 핸들러를 특정 부모에 바인드하고 하위 이벤트를 감지합니다. 그것은 .live() 및 .bind() 이상의 성능 향상뿐만 아니라 .click() 같은 직접 이벤트 바인딩을 가지고 등등 때문에 :
과 함께 document에 이벤트를 바인딩 .live(), .on()는 달리, 당신은 어떤 부모의 담당 에 묶다.
.live()은 문서의 루트 인 document에 바인딩됩니다. 거품이 일게 될 사건은 더 멀어 질 것이다. .on()으로 가장 가까운 일반 부모를 찾아 해당 이벤트를 바인딩 할 수 있습니다. 거품이 덜 여행 할 것이다 - 성능이 향상 .on()와
, 당신은 단지 요소별로 이벤트를 결합 .bind() 직접 이벤트 바인딩 달리, 부모에게 하나의 처리기를 바인딩 - 요소를 많이 좋지 않다.
.on()은 기억하기 쉽습니다.
.on() 안에 대상을 가져올 때 "this"는 항상 대상 요소입니다. 브라우저 간 대상조차 걱정하지 마십시오. jQuery가이를 지원합니다.
그래서 "이"이 코드 :
$(element).on('click','someElement',function(){
//the value of "this" in here is the DOM element target of the event
});
감사합니다, 이미 jQuery.on을 사용하고 있습니다()하지만, 위임 된 이벤트는 다음과 같이 처리와 함께 사용 생각하지 않았다! – Adam