Сравнение между передачей объекта с свойством handleEvent и традиционной функцией обратного вызова в addEventListener

Question

Я прочитал статью (link), в которой объясняется, что второй аргумент addEventListener может быть функцией или объектом, реализующим метод handleEvent.

В Но подождите, пожалуйста, более в разделе этой статьи, где говорится, что использование handleEvent может избежать удаления и повторного прикрепления обработчика событий. Но мне интересно, если это лучший способ, чем повторять «добавить» и «удалить»? С точки зрения аккуратного кода, производительности или чего-то еще?

Спасибо всем!

Answer 1

Использование объекта в качестве слушателя:

var listener = 
    { 
    handleEvent: function (evt) { 

     this === listener; // true 

     // and evt === classic event object 
    } 
}; 


document.addEventListener("click", listener, false); 

имеет следующие преимущества:

• отделяет интерфейс от реализации
• Это помогает избежать циклических ссылок на DOM-объекты
• Он изолирует this от объекта Event

Авторам определения не следует определять интерфейсы обратного вызова, которые имеют только одну операцию, если только это не требуется для описания требований существующих API. Вместо этого следует использовать функцию обратного вызова.

Определение EventListener как интерфейса обратного вызова является примером существующего API, который должен позволить объектам с заданным свойством (в данном случае «handleEvent») считаться реализованным интерфейсом. Для новых API и тех, для которых нет проблем с совместимостью, использование функции обратного вызова позволит использовать только объект Function (в языковой привязке ECMAScript).

Список литературы

• An alternative way to addEventListener - Ajaxian

• Document Object Model (DOM) Level 3 Events Specification: Interface EventListener

• W3C DOM Level 2 version 1.0 - Java API: Interface EventListener

• Web IDL: Callback Interfaces

• WebIDL-1: Implementation Report - All Results