Ссылка на объект при использовании attachEvent
 

Здравствуйте.
Есть код

function addEvent(obj, type, listener) {
        if(obj.addEventListener) {
                obj.addEventListener(type, listener, false);
        }
        else if(obj.attachEvent) {
                obj.attachEvent('on' + type, function() {listener.apply(obj);});
        }
}

function $(id) {
        var obj = document.getElementById(id);
        obj.bind = function(type, listener) {
                addEvent(this, type, listener);
                return this;
        }
        return obj;
}

Допустим выполняем такую конструкцию:

$('id').bind('click', function() {
        alert(this);
});

Для того, чтобы в IE(любой версии) по ссылке this был доступен объект, полученный через $('id') пришлось добавить в attachEvent вот эту конструкцию:

function() {listener.apply(obj);}

но теперь не ясно как реализовать detachEvent ?
Помогите пожалуйста разобраться :confused:

Если честно, не понял в чем суть. В данном вопросе обе функции принимают участие и про какой this идет речь?

this, который в

$('id').bind('click', function() {
        alert(this);
});

При использовании addEventListener все работает отлично, this - возвращает объект, который мы получаем при вызове первой функции $('id'), но при использовании attachEvent, ссылка this - ведет на объект window. Чтобы выполнить добавляемую в обработчик события функцию в контексте объекта, к которому она привязывается, записываем attachEvent следующим образом:

obj.attachEvent('on' + type, function() {listener.apply(obj);});

Но теперь получается, что если мы передадим имя функции в метод bind:

$().bind('click', fn);

то для ИЕ невозможно выполнить detachEvent, т.к. у нас всегда привязывается абстрактная функция... Вот я и спрашиваю как переделать код, чтобы внутри метода bind, объект к которому привязывается функция был доступен по ссылке this, т.е. привязываемая функция выполнялась бы в контексте этого объекта, но можно бы было выполнить detachEvent :rolleyes:

Octane,

- если вы хотите detach'ить хэндлер, то при attach'e он не должен быть анонимным (т.е. функцию надо описать до этого);

- использование apply'я внутри обертки - это, конечно, хорошо (не надо каждый раз писать при добавлении события), но тогда, придется запоминать вновь созданную функцию (как свойство объекта), чтобы получить возможно удалить при detach'e. Поэтому, альтернативной может быть - apply "снаружи" перед bind'ом события к элементу (внутри, естественно, apply'ить (obj.attachEvent('on' + type, function() {listener.apply(obj);}); ) тогда уже не надо):

// вспомогательный wrapper для привязки this
Function.prototype.bind = function(object) {
  var __method = this;
  return function() {
    return __method.apply(object, arguments);
};

function a() {
  alert([this.tagName, this === window]);
}

var obj = $('test');
var handler = a.bind(obj);

obj.bind('click', handler);
obj.unbind('click', handler); // и тогда можно будет detach'ить

P.S. не очень удачно два раза название bind в разных местах получилось, но, думаю, путаницы не вызовет.

P.S.[2]: все методы для расширения объектов лучше вынести в отдельное место и при расширении ссылаться на них, а не создавать каждый раз новую анонимную функцию (это сэкономит ресурсы). А для FF и Opera можно вообще расширить прототип глобального объекта HTMLElement (и тогда все это будет храниться в одном месте; хотя для IE в этом случае так же можно использовать behavior и expression, но это уже отдельная песня и там свои косяки у expression с производительностью).

Спасибо большое, отлично работает. Больше недели голову ломал, как это сделать, даже не подумал чот о встроенном объекте Function, хотя идея про обертку возникала, только не знал как реализовать.
Для удобства наверное сделаю автоматическую привязку

var handler = a.bind(obj);

внутри метода

obj.bind('click', handler);

--------------
эмм нет, не получится автоматической привязки, тогда всегда будет аттачиться функция с именем handler. Придется тогда перед attachEvent проверять, что нам пришло, если абстрактная функция, то автоматически делаем apply как было раньше, если имя функции, то так и передаем ее в attachEvent... а как проверить тип функции? %)

> если абстрактная функция, то автоматически делаем apply как было раньше

Вы ж с этого начали - вам надо detach'ить хэндлеры; но если будет передана анонимная функция при атаче, то нельзя будет сделать detachEvent и removeEventListener (прочитайте мой первый пункт выше). Передавая каждый раз анонимную функцию - вы каждый раз содаете новую функцию. И то, что вы внутри сделаете var handler = ... - это тоже не спасет, т.к. опять не известно, что передавать при detach'e (если только handler у вас не глобальная функция будет, но это уже не правильно).

Поэтому привязывать к this надо снаружи и передавать уже привязанную функцию - одну и ту же - и при атаче и при детаче.

P.S.:

> а как проверить тип функции? %)

"тип функции" тут не совсем подходит - вам же прсто надо узнать есть имя у функции или нет; в FF можно проверить свойство name. Но сработает это только для функции типа declaration:

function a() {};
alert(a.name);

но уже не сработает для типа statement:

var a = function () {}; // один из разновидностей statement'а функции
alert(a.name);

Поэтому кроссбраузерно, можно привести функцю toString'ом и найти имя (или пустоту в случае анонимной функции и некоторых statement'ов).

Но все это не нужно для вашего таска, поэтому в P.S. вынес =)

я прекрасно понимаю, что если передать в метод объекта bind абстрактную функцию, то потом ее нельзя будет детачить, но нам это и не надо, для абстрактных функций выполним автоматическое взятие контекста:

obj.attachEvent('on' + type, function() {listener.apply(obj);});

А вот, чтобы иметь возможность детачить функции и передаем в метод bind имя функции (или ссылку на абстрактную в случае с statement). Но в этом случае надо первоначально получить контекст в котором она будет выполняться:

var handler = a.bind(obj);

т.к. функции привязки событий только часть базовой основы будущего проекта и пользоваться ими придется не только мне, то я более чем на 100% уверен что программисты будут забывать выполнять var handler = a.bind(obj); перед привязкой функции к событиям объекта, что в случае появления необходисмости использования this приведет к длительному поиску ошибки, где же всетаки забыли выполнить обертку, притом это только для IE... поэтому и заговоил об автоматизации этого действия var handler = a.bind(obj);

А вот с определением того, в каком виде передана функция, получается что регулярным выражением мы найдем и абстрактную функцию и statement одинаково :-(

а =) ну, вероятно, цель просто изменилась в процессе; это нормально. Однако, первоначальный основной вопрос в первом посте был именно про это:

Ну да ладно, не надо детачить в вашем случае теперь - значит не надо =)

к сожалению, да

анонимную

детачить анонимную функцию не надо, если планируется использовать detachEvent, то в метод bind надо передавать имя функции или переменную содержащую функцию.

абстрактную - анонимную, в разной литературе встречаются оба эти понятия, думаю они значат одно и то же

ну да, именно об этом и велась речь

Ни в коем случае не считайте за цепляние к словам =)), но, я думаю, главное - это, все же, стремление к истине, поэтому все же стоит сказать:

Термин абстрактный метод (реже - абстрактная функция) - применяется для резервирования (имени) метода в абстрактном классе, с целью последующей перегрузки в классе-наследнике. Т.е. абстрактная функция не может существовать сама по себе. В свою очередь анонимная функция (лямбда) - это полноценно-рабочая функция, но не имеющая своего идентификатора (можно положить ссылку на нее в переменную, но это не идентификатор функции, как в случае с function-declaration). В JS термин "абстрактная функция" не употребляется.

В JavaScript внутри функции можно сослаться на нее саму через специальное свойство callee в объекте arguments; это дает возможность анонимным функциям быть рекурсивными:

(function () {
  alert(arguments.callee);
})();

Да нет, я не считаю это цеплянием к словам :-) спасибо, что поправили, теперь вижу разницу между абстрактной и анонимной функциями.

Отделил функции созданные при помощи declaration и statement от анонимных регулярным выражением:

obj.attachEvent('on' + type, listener.toString().search(/^function\s*\(/) + 1 ? listener.bind(obj) : listener);

для этого в прототипе bind возвращаем не анонимную функцию

Function.prototype.bind = function(object) {
  var __method = this;
  return function __fn() {
    return __method.apply(object, arguments);
}

в итоге получается, что если в метод объекта bind передаем анонимную функцию, то выполняется автоматическая обертка, чтобы по ссылке this был доступен этот объект, иначе, если хотим использовать detachEvent передаем в метод объекта bind имя функции или переменную, содержащую функцию, если хотим еще использовать и detachEvent и this, то перед передачей в метод bind, выполняем еще var handler = fn.bind(obj);
Страсти короче, но работает %)
Как то в jQuery это все автоматически делается :-/

значит нужно запоминать хэндрелы в каком-нибудь хранилище и при unbind'e получать их и делать detachEvent (самому хэндлеру тоже какой-то признак надо ставить, поскольку аттачиться для IE будет не он, а новая функция, полученная посредством apply'я - т.е. надо устроить однозначное соответствие между приходящим хэндлером и тем, который был навешан). За подобную автоматизацию придется платить ресурсами (что jQuery и делает - во всяком случае в этом конкретном случае).

P.S.:

Еще один момент - функция не обязательно является declaration, если имеет имя (в вашем случае - return function __fn() { ... ) - т.к. функция стоит справа от return, - она является statement'ом =).

Наверное остановлюсь на таком варианте, т.к. detachEvent используется редко.

Большой постскриптум: (не касающийся темы, просто чтобы исправить мою терминологическую путаницу, которая фигурировала в этом конкретном топике): "все вхождения "function-statement" читать (естественно, и согласно терминологии ECMAScript) как function-expression"