Механизм привязки событий в браузерах

Question

Я хочу понять, как работает привязка событий в браузерах. В частности, если я удаляю элемент, с которым уже связано событие, например, с помощью jQuery: $("#anElement").remove();, будет ли удалено связанное событие?

Другими словами, если я не unbind() событие первым, я создаю какую-то утечку памяти?

Изменить: Я знаю, что обработчик не будет запущен снова, если элемент удален, а затем добавлен, но что происходит с обработчиком? Это все еще сидит где-нибудь в браузере / DOM?

Answer 1

Когда вы вызываете .remove() (или .empty()), обработчики событий удаляются, вы не теряете память (по крайней мере, из этого, или есть другая ошибкав игре).

Вот что происходит ( в источнике тока ):

remove: function( selector, keepData ) {
  for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
    if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
      if ( !keepData && elem.nodeType === 1 ) {
        jQuery.cleanData( elem.getElementsByTagName("*") );
        jQuery.cleanData( [ elem ] );
      }

      if ( elem.parentNode ) {
         elem.parentNode.removeChild( elem );
      }
    }
  }
  return this;
}

Важной частью является этот бит:

jQuery.cleanData( elem.getElementsByTagName("*") );
jQuery.cleanData( [ elem ] );

Он запускает cleanData() на любых дочерних элементах и ​​самих элементах, удаляет данные и события из $.cache, что очищает память, которую они использовали, и внутренне вызывает jQuery.event.remove(), который очищает обработчики событий индивидуально.

Answer 2

да, вам не нужно unbind.JQuery делает это для вас.

вот простая демонстрация .

$(function(){
    $('#featured').click(function(){
        alert('test');
    });
    var elem;
    $('#remove').click(function(){
       elem = $('#featured').remove();        
    });
    $('#attach').click(function(){
       elem.appendTo('body');        
    });
});