jQuery DOM 구현

Question

사람들이 jQuery가 브라우저가 제공하는 기본 DOM 구현 대신 특수 이벤트 라이브러리를 사용한다고 말한 적이 있습니다.

정확히 무엇을 의미합니까? 실제적으로 말해서 동일한 것을 강조 표시 할 수있는 몇 가지 예를 제공 할 수 있습니까?

Answer 1

매우 일반적으로 인 jQuery에는 클로저를 통해 요소에 대한 참조를 유지하는 요소에 단일 처리기가 연결되는 시스템이 있습니다.

이벤트가 요소에서 발생하면 해당 요소의 컨텍스트에서보다 일반적인 핸들러 (jQuery.event.handle)를 호출하고 수신 한 event 개체를 전달합니다. 핸들러는 이벤트를 분석 그게

는 그 요소의 jQuery1234567...의 expando 속성 통해 jQuery.cache의 요소의 조회를 수행하고, 또한 그 원소의 jQuery.cache 항목에 저장되어 적절한 처리기 (들)를 호출한다.

결과적으로 인 유일한 핸들러는 실제로이라는 요소가 부착 된이 가벼운 것으로서 jQuery 자체가 만들고 첨부합니다. 따라서 DOM 요소에 대한 순환 참조으로 인해 IE 에서 메모리 누수가 발생하지 않습니다. 이벤트 핸들러를 관리 할 수 ​​jQuery를 사용할 때 해야 알고

---

한 가지 요소와 jQuery.cache의 항목 사이의 만 링크가의 expando 속성 때문이다.

DOM에서 요소를 제거하기 위해 jQuery 바깥쪽에있는 코드가있는 경우 에 jQuery.cache의 관련 처리기 및 기타 데이터가 제거되어 이전 버전의 IE에만 ​​국한되지 않는 자체 메모리 누수가 발생한다는 알림이 표시되지 않습니다. .

그래서 당신은 jQuery를 통해 연결된 처리기를 가지고 HTML의 섹션을 가지고, 당신은 같은 것을 할 경우 :

element_container.innerHTML = ''; 

... 이제 고아 제거 된 요소와 관련 jQuery.cache의 모든 항목, 브라우저 창이 열려있는 한 존재할 것입니다.

jQuery을 사용하여 이벤트 바인딩을 관리하는 경우 jQuery이 필요한 경우 jQuery.cache을 관리하고 정리할 수 있도록 요소를 삭제할 때 API 내에 있어야합니다.

---

편집

: 나는 핸들러 주위에 이성을 상실했다. 일반적으로 같은 개념.

/* 
    This is a simplified example of the binding of the generic handler. Notice 
     that it actually invokes an internal function. 
*/ 

elem[0].addEventListener('click', function(e) { 
    _internal_handler.apply(elem, arguments); 
}, false); 

/* 
    This is a simplified example of the internal function. 
*/ 

_internal_handler(e) { 
     // Find out the type of event, like "click", or whatever 
    var event_type = e.type; 

     // Get this element's data from jQuery.cache 
    var data = jQuery.data(this); 

     // If data was found... 
    if(data) { 
      // ...get the "events" stored in the element's data 
     var events = data.events; 

      // If events were found, and events has the current type of event... 
     if(events && events[ event_type ]) { 

       // ...then data.events[ event_type ] will give us the Array of 
       //  handlers for that event type, so iterate the Array, 
       //  and fire the handlers. 
      for(var i = 0; i < events[ event_type ]; i++;) { 

        // handler invoked 
       events[ event_type ][ i ].call(this, e); 

      } 
     } 
    } 
} 

이것은 물론 코드의 극단적 인 단순화이다

/* 
    Here we bind 4 handlers to the same element. 
*/ 

var elem = $('#my_elem'); 

    // This first call to .bind() binds a generic handler to `#my_elem`. 
    // Then it places the handler we passed in jQuery.cache. 
elem.bind('click', function() { alert('click 1'); }); 

    // Generic handler already exists, so these handlers are 
    // just added to jQuery.cache. 
elem.bind('click', function() { alert('click 2'); }); 
elem.bind('mouseenter', function() { alert('mouseenter 1'); }); 
elem.bind('mouseleave', function() { alert('mouseleave 1'); }); 

---

하지만, 일반적으로는 어떻게되는지 보여줍니다.

Answer 2

이러한 링크는 도움이 될 수 있습니다 :

http://docs.jquery.com/Types#Event

http://api.jquery.com/category/events/event-object/

는 기본적으로 jQuery를 모든 브라우저에서 이벤트 형식을 취하고 일반적인 이벤트 객체로 바뀝니다.